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 2020年3月.

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

メモ:プレゼンテーション属性であるため、stroke-dasharray には対応する CSS プロパティstroke-dasharray があります。両方が指定された場合、 CSS プロパティが優先されます。

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

例

html,body,svg {  height: 100%;}

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>