図形の破線の描画開始位置を変更
SVGで図形の破線の描画開始位置を変更するには、stroke-dashoffset属性を使用します。
CSSのstroke-dashoffsetプロパティとしても使用することができます。
構文
XML属性
stroke-dashoffset="開始位置"CSSプロパティ
stroke-dashoffset:開始位置;値
値は数字で指定します。
前進方向ではなく手前に引っ張るように後退方向で位置が指定されます。
負の数字を指定することで前進方向で位置を指定することができます。
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" width="200" height="80">
<path d="M 0,10 200,10" fill="none" stroke="black" stroke-width="6" stroke-dasharray="50" />
<path d="M 0,40 200,40" fill="none" stroke="black" stroke-width="6" stroke-dasharray="50" stroke-dashoffset="20" />
<path d="M 0,70 200,70" fill="none" stroke="black" stroke-width="6" stroke-dasharray="50" stroke-dashoffset="-20" />
</svg>