stroke-dasharray

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

stroke-dasharray 属性は、図形の輪郭線を描くのに用いるダッシュとすき間のパターンを定義するプレゼンテーション属性です。

メモ: プレゼンテーション属性である stroke-dasharray は、CSS プロパティとして使用することができます。

この属性は以下の SVG 要素で使用することができます。

html
<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    line {
      stroke: black;
    }
  </style>
  <!-- ダッシュもすき間もなし -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- ダッシュとすき間が同じ長さ -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- ダッシュとすき間が異なる長さ -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- ダッシュとすき間が様々な長さで、値の数が奇数 -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- ダッシュとすき間が様々な長さで、値の数が偶数 -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- すき間から始まる破線 -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>

使用上のメモ

none | <dasharray>
既定値 none
アニメーション
<dasharray>

カンマまたは空白で区切られた <length><percentage> のリストで、ダッシュとギャップの長さを指定します。

もし奇数の値が指定された場合は、偶数の値になるように値のリストが繰り返されます。従って、 5,3,25,3,2,5,3,2と等価です。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# StrokeDashing

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke-dasharray

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support