結城永人pathは座標からどんな線でも数多く描けるインラインSVGで最も自由度の高いタグだ。
しかし使ってみると一本の線の開始点と終了点の両端がスムーズに繋がらない場合があって参った。
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240">
<path d="M50 110 L160 20, 270 110 h-220 M80 110 v110 h160 v-110 M240 140 h-50 v80 M95 125 h65 v40 h-65 v-40" stroke-width="4" stroke="#4682b4" fill="none"/>
<circle cx="50" cy="110" r="10" stroke="#ff6347" stroke-width="2" fill="none"/>
<circle cx="95" cy="125" r="10" stroke="#ff6347" stroke-width="2" fill="none"/>
</svg>構わないといえば構わないし、芸術的に味のある仕上がりかも知れないけど、しかしスムーズに繋ぎたくても繋げないのでは表現力が下がってしまう。
種々と試していたら開始点と終了点を繋ぎ合わせるZコマンドを使うと大丈夫だと分かった。
Zコマンドでpathタグの線の両端を繋ぎ合わせる
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240">
<path d="M50 110 L160 20, 270 110 Z M80 110 v110 h160 v-110 M240 140 h-50 v80 M95 125 h65 v40 h-65 Z" stroke-width="4" stroke="#4682b4" fill="none"/>
<circle cx="50" cy="110" r="10" stroke="#ff6347" stroke-width="2" fill="none"/>
<circle cx="95" cy="125" r="10" stroke="#ff6347" stroke-width="2" fill="none"/>
</svg>直線だと終了点をZコマンドと置き換えて省略できて曲線だと終了点の後にZコマンドを記載するとスムーズに繋がるんだ。
Zコマンドはpathタグで描画される一本の線（複数では開始点のMコマンド毎に区別される）の開始点と終了点を結び付ける。それぞれが遠く離れているところで使うと直線が新しく引かれて、一本、増える。
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240">
<g transform="rotate(20 160 120)">
<path d="M110 50 Q125 130,160 220 Q195 130, 210 50 M210 50 Q160 90, 110 50 Q160 -10, 210 50 Z" stroke-width="4" stroke="#4682b4" fill="none" stroke-linejoin="bevel"/>
<circle cx="210" cy="50" r="10" stroke="#ff6347" stroke-width="2" fill="none"/>
</g>
</svg>両端を繋ぎ合わせるのが直線の場合は新しく引かれれば終了点を記載する代わりになるけど、ところが曲線の場合は終了点を省略できないからもう既に繋ぎ合わさった両端の処理の仕方だけがスムーズに変わるようになる。
いい換えると一本の線の両端の繋ぎ目が頂点として扱われるので、インラインSVGのpathタグの繋ぎ目のデザインもZコマンドを使うかどうかによって二種類が表現できるわけだ。
線のデザインの主な属性からZコマンドを使わないと両端のstroke-linecapの値、Zコマンドを使うと頂点のstroke-linejoinの値を（大きな角度でも鋭角を保つにはstroke-miterlimitの値も）取ってデザインが付けられる。
コメント