ストロークダッシュアレイパターンがどのように機能するか

SVGラインのstroke-dasharrayプロパティは、点線のライン効果を作成できます。それがどのように機能するか見てみましょう。

SVGラインがあるとします。

<svg><line stroke="#f8a100" x1="0" x2="500" y1="30" y2="30"></line></svg>

CSSでstroke-dasharrayプロパティを使用して点線を作成できます。

ライン {
  ストロークダッシュアレイ：5;
}

値5 、SVG viewBoxサイズに基づいて、相対ユニットです。任意のCSS長ユニットも使用できます。 5つの単位ダッシュと5つの単位ギャップで構成されるパターンを作成します。

2つの値を使用できます。2番目の値は、ギャップの長さを個別に設定します。

ライン {
  ストロークダッシュアレイ：5 10;
}

これで、5つの単位ダッシュと10単位のギャップがあります。 3つの値を試してみましょう。

ライン {
  ストロークダッシュアレイ：5 10 15;
}

パターンを形成していることがわかります。

• ダッシュ：5ユニット
• ギャップ：10ユニット
• ダッシュ：15ユニット

あなたはそれが同じペースで繰り返されると思うかもしれません。しかし、いや！それが起こった場合、ダッシュラインは互いに衝突します：

• ダッシュ：5ユニット
• ギャップ：10ユニット
• ダッシュ：15ユニット
• ダッシュ：5ユニット
• ギャップ：10ユニット
• ダッシュ：15ユニット
• ...等。

代わりに、 stroke-dasharray値の数が奇数の場合、パターンをインテリジェントに繰り返します。それで：

ストロークダッシュアレイ：5 10 15;

/ * */に相当します
ストロークダッシュアレイ：5 10 15 5 10 15;

これは実際に、単一の値も機能する理由を説明しています！以前は、 5の単一値を宣言しました。これは、実際にはstroke-dasharray: 5 5 。 2番目の値がない場合は、 stroke-dasharray最初の値を暗黙的にコピーして、再現可能なパターンを取得します。それ以外の場合は、5単位のダッシュで構成される固体ラインになり、ダッシュの間にギャップがありません！

パターンは、形状自体のサイズにも依存します。 SVGラインは500ユニットです。より大きなstroke-dasharray値を設定して、それらを追加しましょう。

ストロークダッシュアレイ：10 20 30 40 50;

モードが4回（150ユニット×4反復）実行されると、合計600ユニットを処理します。追加の100ユニットは、パターン自体がオーバーフローするのを防ぐために切り捨てられます。

それでおしまい。

これを指摘してくれたジョシュアダンスに感謝します！

以上がストロークダッシュアレイパターンがどのように機能するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。