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

<svg> <line stroke = " x1="0" x2="y1 ="> </p> <p>値<code> 5 </code>は、svgの<code> viewbox </code>サイズに基づいています。任意のCSS長ユニットも使用できます。 5つの単位ダッシュと5つの単位ギャップで構成されるパターンを作成します。 </p> <p> 2番目の値は、ギャップの長さを個別に設定できます。 3つの値を試してみましょう。</p> <pre class="brush:php;toolbar:false">行{ストロークダッシュアレイ：5 10 15;しかし、いや！その場合、ダッシュは互いに衝突します：

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

対照的に、ストローク・ダッシュアレイは、値の数が奇数である場合、パターンをインテリジェントに繰り返します。したがって、

ストロークダッシュアレイ：5 10 15;以前は、単一の値<code> 5 </code>を宣言しました。これは、実際には<code>ストロークダッシュアレイ：5 5 </code>に相当します。 2番目の値がない場合、<code>ストロークダッシュアレイ</code>最初の値を暗黙的にコピーして、再現可能なパターンを取得します。それ以外の場合は、5単位のダッシュで構成される固体ラインになり、ダッシュの間にギャップがありません！  <p>このパターンは、形状自体のサイズにも依存します。 SVGラインは500ユニットです。より大きな<code>ストロークダッシュアレイ</code>値を設定して、それらを追加します：</p> <pre class="brush:php;toolbar:false">ストロークダッシュアレイ：10 20 30 40ユニット*/

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

それだけです。

これを指摘してくれたJoshua Danceに感謝します！

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