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

Définition d'une largeur de trait: 1 sur un <rect>élément en 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?

— user782860
source

Réponses:

166

Si vous avez besoin d'un contour ou d'un contour nul, 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>

Développer l'extrait

Voir jsfiddle .

— Erik Dahlström
source

Comment pouvons-nous afficher le trait uniquement au-dessus de l'élément rect?

— Suresh

Pouvez-vous expliquer pourquoi certains nombres à certaines positions donnent cet effet?

— JacobIRR

@JacobIRR renvoie à la définition de la propriété 'stroke-dasharray' (liée dans la réponse). L'idée ici est de faire correspondre les longueurs de tiret aux côtés du rectangle et l'écart de tiret avec le côté qui ne devrait pas avoir de trait.

— Erik Dahlström

Je viens de mettre à jour votre solution, dans ce lien codepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

Voici une solution programmatique qui génère stroke-dasharrayun objet donné définissant les bordures à afficher. La lecture du code peut vous aider à comprendre comment cela fonctionne: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

Vous ne pouvez pas modifier le style visuel de différentes parties d'une même forme en SVG (absence du module Effets vectoriels 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.

Plus précisément dans ce cas, au lieu d'utiliser un élément <rect>ou <polygon>, 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/

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

Pour plus d'informations, lisez sur les formes <polyline>plus puissantes mais plus déroutantes <path>.

— Phrogz
source

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 tracé / forme, vous devez donc utiliser plusieurs objets pour obtenir le même effet.

— wdebeaum
source