web-dev-qa-db-fra.com

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

La définition d'une largeur de trait: 1 sur un élément <rect> Dans SVG place un trait de chaque côté du rectangle.

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

html5svgvector-graphicsinkscape
89
user782860

Si vous avez besoin d'un trait ou d'un non-trait, vous pouvez également utiliser stroke-dasharray pour ce faire, en faisant correspondre les tirets et les espaces avec les 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 }
<svg height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

Voir jsfiddle .

162
Erik Dahlström

Vous ne pouvez pas changer le style visuel de diverses parties d'une même forme en SVG (en l'absence du module Vector Effects pas 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 <rect> ou <polygon> élément, vous pouvez créer un <path> ou <polyline> qui ne couvre que trois côtés du rectangle:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

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

Red square with stroke on three sides

Pour plus d'informations, consultez la section <polyline> et plus puissant mais plus déroutant <path> formes.

29
Phrogz

Vous pouvez utiliser une polyligne pour les trois côtés tracés, et ne pas mettre du tout le trait sur le rectangle. Je ne pense pas que SVG vous permet d'appliquer différents traits à différentes parties d'un chemin/d'une forme, vous devez donc utiliser plusieurs objets pour obtenir le même effet.

2
wdebeaum