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?
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?
Risposte:
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>
Vedi jsfiddle .
stroke-dasharray
dato 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
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/
Per ulteriori informazioni, leggi le forme <polyline>
più potenti ma più confuse <path>
.