ストロークの使い方

  • 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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA