Comment définir une largeur de trait: 1 sur certains côtés seulement des formes SVG?

Définir une largeur de trait: 1 sur un élément dans SVG place un trait de chaque côté du rectangle.

Comment placer une largeur de trait sur trois côtés seulement d’un rectangle SVG?

Si vous avez besoin d’un coup ou d’un coup, vous pouvez également utiliser stroke-dasharray , en faisant correspondre les tirets et les espaces aux côtés du rectangle.

 rect { fill: none; stroke: black; } .top { stroke-dasharray: 0,50,150 } .left { stroke-dasharray: 150,50 } .bottom { stroke-dasharray: 100,50 } .right { stroke-dasharray: 50,50,100 }

Vous ne pouvez pas modifier le style visuel de différentes parties d’une même forme dans SVG (absence du module Vector Effects non encore disponible). Au lieu de cela, vous devrez créer des formes distinctes pour chaque trait ou autre style visuel que vous souhaitez modifier.

Spécifiquement pour ce cas, au lieu d’utiliser un élément ou , vous pouvez créer un ou un qui ne couvre que trois côtés du rectangle:

Vous pouvez voir l’effet de ceux-ci en action ici: http://jsfiddle.net/b5FrF/3/

Carré rouge avec un trait sur trois côtés

Pour plus d’informations, reportez-vous à la section et aux formes plus puissantes mais plus confuses.

Vous pouvez utiliser une polyligne pour les trois côtés frappés et ne pas simplement placer le trait sur le rectangle. Je ne pense pas que SVG vous permette d’appliquer différents traits à différentes parties d’un chemin ou d’une forme. Vous devez donc utiliser plusieurs objects pour obtenir le même effet.