Come impostare una larghezza del tratto: 1 solo su alcuni lati delle forme SVG?

L'impostazione di una larghezza del tratto: 1 su un <rect>elemento in SVG inserisce un tratto su ogni lato del rettangolo.

Come si posiziona una larghezza del tratto solo su tre lati di un rettangolo SVG?

— user782860
fonte

Risposte:

166

Se hai bisogno di tratto o nessun tratto, puoi anche usare tratto-dasharray per farlo, facendo combaciare i trattini e gli spazi vuoti con i lati del rettangolo.

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>

Espandi lo snippet

Vedi jsfiddle .

— Erik Dahlström
fonte

Come possiamo mostrare il tratto solo sopra l'elemento retto?

— Suresh

Potrebbe spiegare perché certi numeri in certe posizioni danno questo effetto?

— JacobIRR

@JacobIRR si riferisce alla definizione della proprietà 'stroke-dasharray' (collegata nella risposta). L'idea qui è di abbinare le lunghezze dei trattini ai lati del rettangolo e lo spazio tra i trattini con il lato che non dovrebbe avere tratti.

— Erik Dahlström

Ho appena aggiornato la tua soluzione, in questo link codepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

Ecco una soluzione programmatica che genera stroke-dasharraydato un oggetto che definisce quali bordi devono essere mostrati. Leggere il codice potrebbe aiutarti a capire come funziona: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

Non è possibile modificare lo stile di visualizzazione di varie parti di una singola forma in SVG (senza gli effetti vettoriali non ancora disponibili modulo ). Invece, dovrai creare forme separate per ogni tratto o altro stile visivo che desideri variare.

In particolare per questo caso, invece di utilizzare un elemento <rect>o <polygon>puoi creare un <path>o <polyline>che copre solo tre lati del rettangolo:

<!-- 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" />

Puoi vedere l'effetto di questi in azione qui: http://jsfiddle.net/b5FrF/3/

Quadrato rosso con tratto su tre lati

Per ulteriori informazioni, leggi le forme <polyline>più potenti ma più confuse <path>.

— Phrogz
fonte

Potresti usare una polilinea per i tre lati tratteggiati e non mettere affatto il tratto sul rettangolo. Non credo che SVG ti consenta di applicare tratti diversi a parti diverse di un tracciato / forma, quindi è necessario utilizzare più oggetti per ottenere lo stesso effetto.

— wdebeaum
fonte