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>