SVG stroke-linecap à une extrémité seulement

Est-il possible d'ajouter un linecap à une seule extrémité d'un trait? Les deux ne se terminent pas, comme c'est le cas par défaut dans l'exemple ci-dessous.SVG stroke-linecap à une extrémité seulement

<?xml version="1.0"?> 
 
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 

 
    <line stroke-linecap="butt" 
 
     x1="30" y1="30" x2="30" y2="90" 
 
     stroke="teal" stroke-width="20"/> 
 

 
    <line stroke-linecap="round" 
 
     x1="60" y1="30" x2="60" y2="90" 
 
     stroke="teal" stroke-width="20"/> 
 
      
 
    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" 
 
     stroke="white" /> 
 
</svg>

Source

2017-10-05 D-Money

Non ... Je ne crois pas. * "l'attribut stroke-linecap spécifie la forme à utiliser à la fin des sous-chemins ouverts quand ils sont strokes. *" ... donc puisque les extrémités sont toutes les deux ouvertes la réponse serait non. –

Vous recherchez peut-être 'marker' - https://www.w3.org/TR/SVG/painting.html#MarkerElement –

Vous pouvez le faire avec deux lignes, l'une sur l'autre.

<?xml version="1.0"?> 
 
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 

 
    <line stroke-linecap="butt" 
 
     x1="30" y1="30" x2="30" y2="90" 
 
     stroke="teal" stroke-width="20"/> 
 

 
    <line stroke-linecap="round" 
 
     x1="60" y1="30" x2="60" y2="70" 
 
     stroke="teal" stroke-width="20"/> 
 
    <line stroke-linecap="butt" 
 
     x1="60" y1="40" x2="60" y2="90" 
 
     stroke="teal" stroke-width="20"/> 
 
      
 
    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" 
 
     stroke="white" /> 
 
</svg>

Source

2017-10-05 21:32:33

SVG stroke-linecap à une extrémité seulement

Répondre

Questions connexes