svg で描いちゃう!書き方おぼえがき vol.06 【 二次曲線 Q・q 】

二次曲線とスプライン曲線は・・・数学ですね。

こんなとき、もっと数学をやっておけばよかったとひしひしと感じます。

でも二次曲線を理解してなくても大丈夫!

私もよくわかってません!!

では、得意のビジュアルで!!!

だって、絵をかくんだもん!!!!


どちらもハンドル操作ではなく、自動で引かれる曲線です。
自由に動かすには不向きかも?
図形や、アニメーションの軌道を書いたりには便利そうです。


それでは!!


Q・q :二次曲線

<path class="cls-1" d="M50,100q35-35,70,0,35,40,70,0c0-40-40-60-70-60S50,70,50,100Z"/>

1 :ハンドルの頂点。
2 :次点。

の 2点でセグメントを描画します。
ハンドルはアンカーから頂点までの距離の 2/3 の長さです。


<path class="cls-1" d="

M50,100

svghowto_5-01


q35-35,70,0,

svghowto_5-02

svghowto_5-03


35,35,70,0

svghowto_5-04

svghowto_5-05


c0-40-40-60-70-60

svghowto_5-06

svghowto_5-07

svghowto_5-08


S50,70,50,100Z

svghowto_5-09

svghowto_5-10

"/>


書き方のバリエーション

相対座標
<path class="cls-1" d="M50,100q35-35,70,0,35,35,70,0c0-40-40-60-70-60s-70,30-70,60Z"/>

絶対座標
<path class="cls-1" d="M50,100Q85,65,120,100,155,135,190,100C190,60,150,40,120,40,S50,70,50,100Z"/>

最終セグメントが絶対座標
<path class="cls-1" d="M50,100q35-35,70,0,35,35,70,0c0-40-40-60-70-60S50,70,50,100Z"/>


頂点と距離を記述すればいいので、波線を簡単に描画することができます。

罫線に利用できますね。
html に直接書いちゃえばいいんだもんね!


svghowto_5-11b


二次曲線は美しいです!!




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

03 | 2024/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -

月別アーカイブ