Comment fonctionnent les modèles de dasharray

L'effet de ligne svg tram-dashArray peut créer un effet de ligne Dotted. Voyons comment cela fonctionne.

Supposons que vous ayez une ligne SVG:

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

-DashArray: 5;} pre>

La valeur 5 est une unité relative, basée sur la taille Viewbox du SVG. Nous pouvons également utiliser n'importe quelle unité de longueur CSS. Il crée un motif composé de 5 tirets d'unité et de 5 lacunes longues.

Nous pouvons utiliser deux valeurs, la deuxième valeur définit séparément la longueur de l'espace:

 line {TRAD-Dasharray: 5 10;} 

Nous avons maintenant 5 tirets d'unité et 10 espaces d'unité. Essayons trois valeurs:

 Ligne {TRAD-Dasharray: 5 10 15;} 

Vous pouvez voir que nous formons un motif:

• Dashs: 5 unités
• ICHAPS: 10 Unités
Mais non! Si cela se produit, les tirets entrent en collision les uns avec les autres:
• Dashs: 5 unités
• ETPACES: 10 unités
• Dishes: 15 unités
• Dontes: 5 unités
ETS.

En revanche, tram-dasharray répétera intelligemment le modèle si le nombre de valeurs est un nombre impair. Donc:

 tram-dasharray: 5 10 15; Auparavant, nous avons déclaré une seule valeur <code> 5 </code>. Cela équivaut en fait à <code> trait-dasharray: 5 5 </code>. S'il n'y a pas de deuxième valeur, <code> trait-dasharray </code> copiez implicitement la première valeur pour obtenir un modèle reproductible. Sinon, ce ne sera qu'une ligne continue composée de 5 tirets d'unité, sans lacunes entre les tirets!  <p> Ce modèle dépend également de la taille de la forme elle-même. Notre ligne SVG est de 500 unités. Définissons les valeurs plus grandes <code> tram-dasharray </code> et additionnez-les: </p> <pre class="brush:php;toolbar:false"> tram-dasharray: 10 20 30 40 50; Les 100 unités supplémentaires seront tronquées pour empêcher le motif lui-même de déborder.  <p> c'est tout. </p> <p> Merci à Joshua Dance pour l'avoir souligné! </p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!