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

95

Ustawienie szerokości obrysu: 1 na <rect>elemencie w SVG powoduje umieszczenie obrysu z każdej strony prostokąta.

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

html svg vector-graphics inkscape user782860
źródło

Odpowiedzi:

171

Jeśli potrzebujesz kreski lub braku kreski, możesz również użyć do tego tablicy kresek-kresek, dopasowując kreski i przerwy do boków 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>
Rozwiń fragment

Zobacz jsfiddle .

Erik Dahlström
źródło
Jak możemy pokazać obrys tylko na górze prostego elementu?
Suresh
1
Czy mógłbyś wyjaśnić, dlaczego pewne liczby na określonych pozycjach dają taki efekt?
JacobIRR
@JacobIRR odwołują się do definicji właściwości „stroke-dasharray” (połączonej w odpowiedzi). Pomysł polega na dopasowaniu długości kresek do boków prostokąta, a odstęp między kreskami do boku, który nie powinien mieć obrysu.
Erik Dahlström
Właśnie zaktualizowałem Twoje rozwiązanie, w tym linku codepen.io/shaswatatripathy/pen/oNgPpyd
tripathy
Oto programowe rozwiązanie, które generuje stroke-dasharraydany obiekt definiujący, które granice powinny być pokazane. Czytanie kodu może pomóc ci zrozumieć, jak to działa: codepen.io/lazd/pen/WNweNwy?editors=1010
lazd
30

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

W tym przypadku zamiast używać elementu <rect>lub <polygon>można utworzyć znak <path>lub <polyline>obejmujący 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" />

Możesz zobaczyć ich efekt w akcji tutaj: http://jsfiddle.net/b5FrF/3/

Czerwony kwadrat z kreską z trzech stron

Aby uzyskać więcej informacji, przeczytaj o <polyline>i potężniejszych, ale bardziej zagmatwanych <path>kształtach.

Phrogz
źródło
2

Możesz użyć polilinii dla trzech obrysowanych boków i po prostu w ogóle nie umieszczać kreski na prostokącie. Wydaje mi się, że SVG nie pozwala na stosowanie różnych pociągnięć do różnych części ścieżki / kształtu, więc aby uzyskać ten sam efekt, musisz użyć wielu obiektów.

wdebeaum
źródło