stroke-dashoffset

構文

/* キーワード */
stroke-dashoffset: none;

/* 長さとパーセント値 */
stroke-dashoffset: 2;
stroke-dashoffset: 2px;
stroke-dashoffset: 2%;

/* グローバル値 */
stroke-dashoffset: inherit;
stroke-dashoffset: initial;
stroke-dashoffset: revert;
stroke-dashoffset: revert-layer;
stroke-dashoffset: unset;

値

<number>

SVG 単位の数値であり、現在の単位空間によって定義されたサイズです。指定された値が 0 以外の場合、破線配列の起点をその中の別の位置に移動します。したがって、正の値を指定すると、ダッシュとすき間のパターンが後方へずれたように見え、負の値を指定すると、パターンが前方へずれたように見えます。

<length>

ピクセル単位は SVG 単位と同様に扱われます（上記の <number> 参照）。em などのフォントベースの長さは、要素のテキストサイズに対する SVG 値を基準に計算されます。その他の長さの単位の効果はブラウザーによって異なる場合があります。任意の値を指定してずらず効果は、<number> 値の場合と同じです（上記参照）。

<percentage>

パーセント値は、現在の SVG ビューポートの正規化された対角線からの相対値で、これは $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$ で計算されます。負の値は無効です。

公式定義

形式文法

stroke-dashoffset = 
  <length-percentage>  |
  <number>             

<length-percentage> = 
  <length>      |
  <percentage>  

例

破線をずらす

破線をずらす方法を示すため、まず 5 つの同一のパスを設定します。これら全てに、SVG 属性 stroke-dasharray を介して、20 単位のダッシュに 3 単位のすき間が続く破線配列を指定します（これは CSS プロパティ stroke-dasharray でも実現可能です）。次に、各パスに CSS を介してそれぞれの破線のオフセットを適用します。

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#eeeeee" />
  <g stroke="dodgerblue" stroke-width="2" stroke-dasharray="20,3">
    <path d="M 10,10 h 80" />
    <path d="M 10,15 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,25 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

path:nth-of-type(1) {
  stroke-dashoffset: 0;
}
path:nth-of-type(2) {
  stroke-dashoffset: -5;
}
path:nth-of-type(3) {
  stroke-dashoffset: 5;
}
path:nth-of-type(4) {
  stroke-dashoffset: 5px;
}
path:nth-of-type(5) {
  stroke-dashoffset: 5%;
}

上から順に、

1. 5 つのうち最初のパスには 0 のオフセットが与えられ、これが既定の動作です。
2. 2 番目のパスにはオフセット -5 が与えられており、これにより配列の始点がゼロ点より 5 単位手前にシフトします。視覚的にはダッシュパターンが 5 単位分前方に押し出される効果があり、パスの始点ではダッシュの最後の 2 単位と、その後 3 単位のすき間が見えることになります。
3. 3 番目のパスにはオフセット 5 が設定されています。これは破線パターンの始点が、破線パターンの 5 単位目から始まることを意味します。視覚的には破線パターンが 5 単位分後方に押し出された効果となり、パスの始点ではダッシュの最後の 15 単位と、それに続く 3 単位のすき間が確認できます。
4. 4 番目のパスには 5px のオフセットが設定されており、これは値 5 と同じ効果を持ちます（上記参照）。
5. 5 番目の最後のパスは 5% のオフセットが設定されており、これは前の 2 つの例とよく似ていますが、まったく同じではありません。パーセント値は SVG ビューポートの対角線長を基準に計算されます。そのため、ビューポートのサイズやアスペクト比によっては、とても大きく変動する可能性があります。

仕様書

ブラウザーの互換性

関連情報

• SVG の stroke-dashoffset 属性
• CSS の stroke-dasharray プロパティ
• CSS の stroke プロパティ