ストロークの使い方

  • stroke:線の色を指定する
  • stroke-width:線の幅を指定する
  • stroke-opacity:線の透明度を指定する
  • stroke-linecap:線の両端の形状を指定する
  • stroke-linejoin:頂点の形状を指定する
  • stroke-dasharray:線のパターンを指定する
  • stroke-dashoffset:パターンの開始位置を指定する

参考:

SVG でアウトラインをカスタマイズしてみよう | Webクリエイターボックス

stroke | MDN

SVG Stroke Properties | W3Schools

線種 (stroke-dasharray / stroke-dashoffset)

参考:

SVG でアウトラインをカスタマイズしてみよう | Webクリエイターボックス

stroke-dasharray | CSS-Tricks

stroke-dashoffset | CSS-Tricks

SVG Stroke Properties | W3Schools

stroke-dasharray | MDN

stroke-dashoffset | MDN

stroke-linecap

  • butt:打ち切り (デフォルト)
  • round:丸
  • square:四角

参考:

SVG でアウトラインをカスタマイズしてみよう | Webクリエイターボックス

アニメーション

参考:

SVG のアニメーションで線を引く方法まとめ (IEへの対応も)|2.IDEA

プラグインなしで作る SVG アニメーション (パスに沿って描写されていくアニメーション) – Qiita

SVG で円をアニメーションさせたい時の MEMO – Qiita

How SVG Line Animation Works | CSS-Tricks

CSS/SVG Animated Circles | CodePen

marker

参考:

点線の点の形を自由に変える方法 | CreativeStyle

グラデーション

参考:

SVG Stroke Gradient | CodePen

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です