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

Question

Impostazione di una larghezza di tratto: 1 su un elemento <rect> in SVG posiziona un tratto su ogni lato del rettangolo.

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

Answer 1

Non è possibile modificare lo stile di visualizzazione delle varie parti di una singola forma in SVG (assenza del modulo Vector Effects non ancora disponibile). 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> è possibile 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" /> 

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

Per ulteriori informazioni, leggere la 01.232.130,557 milae forme più potenti, ma più confuse <path>.

Answer 2

È possibile utilizzare una polilinea per i tre lati tratteggiati e non posizionare il tratto sul rettangolo. Non penso che SVG ti consenta di applicare tratti diversi a parti diverse di un percorso/forma, quindi devi utilizzare più oggetti per ottenere lo stesso effetto.

Answer 3

Se è necessario il tratto o il no-stroke, è possibile utilizzare anche stroke-dasharray facendo in modo che i trattini e gli spazi coincidano 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.