スキップしてメイン コンテンツに移動

些細な日常

インラインSVGのpathタグで描いた線の両端を繋ぎ合わせるにはZコマンドを使う

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の値も)取ってデザインが付けられる。

  • ブログの投稿者: 結城永人
  • タイトル: インラインSVGのpathタグで描いた線の両端を繋ぎ合わせるにはZコマンドを使う
  • 最終更新: 

コメント

最近の投稿

日付: 

目眩の薬から黒い虫が歩いているなどの幻覚を起こす場合がある

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

後藤浩輝と抑鬱傾向による突発的な自殺

イメージ

中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...