svg で描いちゃう!書き方おぼえがき vol.07 【 スプライン曲線 T・t 】

この T・t は、Illustrator からの書き出しでは出現しませんでした。

使わなくてもいいんじゃないか? と感じます。
こんな曲線も引けるんだって思っといてください。


T・t :スプライン曲線

<path class="cls-1" d="M50,100t30-15,40,15,40,15,30-15c0-40-40-60-70-60S50,70,50,100Z"/>

頂点を記述します。
3つの頂点を通る二次曲線でセグメントを描画します。


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

M50,100

svghowto_6-01


t30-15,40,15,40,15,30-15

svghowto_6-02

svghowto_6-03

svghowto_6-04

svghowto_6-05


c0-40-40-60-70-60

svghowto_6-06

svghowto_6-07

svghowto_6-08


S50,70,50,100Z

svghowto_6-09

svghowto_6-10

"/>


書き方のバリエーション

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

絶対座標
<path class="cls-1" d="M50,100T80,85,120,100,160,115,190,100,C190,60,150,40,120,40S50,70,50,100Z"/>

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


なんだかわからないー!!


という Illustrator 使いの方。
こちら、「曲線ツール」だと思ってください。

「曲線ツール」でざっくり解説!


2点を打ったところで終了すると。

svghowto_6-11

直線です。


3点打つと。

svghowto_6-12

svghowto_6-13

3点を通る弧が描けます!

軌道が出るのでわかりやすいでしょ?!

次からが本番。


4点目を打つと。

svghowto_6-14

svghowto_6-15

前のセグメントが動いちゃう!


これは、スプライン曲線が 3点で描かれるから。
アンカーを共有するので、お互いに影響を受けた曲線になります。

どんな風に描かれるのか?

は、前後の関係によって一概ではありません。
特に自由な曲線を描く場合。
細かくアンカーを打たないと目的の曲線になりません。

TrueTypeフォント はこの曲線でアウトラインが作成されています。
PostScriptフォント はベジェ曲線です。

DTP が一般に普及され始めた当初、
「だから PostScriptフォント はデータ量が少なくて軽いんだ!」
と解説されたものです。

そして、svg のスプライン曲線には問題が!

基点にハンドルがつきません!

とにかく、最初のセグメントがどうしても直線になってしまうんです。
出だしが直線だと、アンカーの落としどころが難しくなってきちゃうよね。

もしかしたら、私の記述? なのかも??




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

11 | 2023/12 | 01
- - - - - 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
31 - - - - - -

月別アーカイブ