Jak ustawić szerokość obrysu: 1 tylko dla niektórych boków kształtów SVG?

Question

Ustawienie szerokości obrysu: 1 na elemencie w SVG powoduje przesunięcie po każdej stronie prostokąta.

Jak umieścić szerokość obrysu tylko na trzech stronach prostokąta SVG?

Answer 1

Nie można zmienić stylu wizualnego różnych części pojedynczego kształtu w SVG (nie ma jeszcze niedostępnego modułu Vector Effects). Zamiast tego musisz utworzyć osobne kształty dla każdego obrysu lub innego stylu wizualnego, który chcesz zmienić.

Konkretnie w tym przypadku, zamiast stosowania elementu <rect> lub <polygon> można utworzyć <path> lub <polyline> że obejmuje tylko trzy boki prostokąta:

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

widać efekt ich w akcji tutaj : http://jsfiddle.net/b5FrF/3/

Aby uzyskać więcej informacji, przeczytaj o <polyline> i bardziej potężne, ale bardziej mylące kształty <path>.

Answer 2

Można użyć polilinii dla trzech obrysowanych boków i po prostu nie umieszczać skoku na prostokącie. Nie sądzę, że SVG pozwala zastosować różne pociągnięcia do różnych części ścieżki/kształtu, więc musisz użyć wielu obiektów, aby uzyskać ten sam efekt.

Answer 3

Jeśli potrzebujesz obrysu lub bez obrysu, możesz również użyć stroke-dasharray, aby zrobić to, tworząc kreski i szczeliny z bokami prostokąta.

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>

Zobacz jsfiddle.