SVGに行があるとしましょう：
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>あなたが使用することができます stroke-dasharray ダッシュを作成するCSSのプロパティ：
line {
stroke-dasharray: 5;
}それ 5 値は、SVGのサイズに基づく相対的な単位です。 viewBox。 実際には、任意の長さのCSSを使用できます。 しかし、それが行うことは、5単位の長さで、それらの間に5単位のギャップがあるダッシュのパターンを作成することです。
ここまでは順調ですね。 XNUMXつの値を使用できます。XNUMX番目の値はギャップの長さを個別に設定します。
これで、ダッシュが5単位、ギャップが10になりました。XNUMX番目の値を試してみましょう。
ここでパターンを形成している様子をご覧ください。 それは行きます：
- ダッシュ：5ユニット
- ギャップ：10ユニット
- ダッシュ：15ユニット
その後、まったく同じリズムで繰り返されると思います。 しかし、違います！ もしそうなら、ダッシュが互いにぶつかるでしょう：
- ダッシュ：5ユニット
- ギャップ：10ユニット
- ダッシュ：15ユニット
- ダッシュ：5ユニット
- ギャップ：10ユニット
- ダッシュ：15ユニット
- …等々。
代わりに、 stroke-dasharray 値が奇数の場合、すべてがスマートになり、パターンが複製されます。
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;これが、実際には単一の値が機能する理由です。 以前、私たちはシングルを宣言しました 5 価値。 それは本当に言うことと同じです stroke-dasharray: 5 5。 XNUMX番目の値がない場合、 stroke-dasharray 最初の値を暗黙的に複製して、繰り返し可能なパターンを取得します。 それ以外の場合は、5単位の長さのダッシュの実線になりますが、それらの間にギャップはありません。
パターンは、形状自体のサイズにも依存します。 私たちのSVG line 500台です。 大きく設定しましょう stroke-dasharray 値とそれらを合計します：
stroke-dasharray: 10 20 30 40 50; /* 150 units */パターンが150回実行される場合（4ユニット⨉600回の反復）、合計100ユニットを処理します。 その追加のXNUMXユニットは、パターン自体がオーバーフローするのを防ぐために削除されます。
それで全部です。
