Naprawiono szerokość obrysu w SVG

104

Chciałbym móc ustawić szerokość obrysu w elemencie SVG tak, aby była „uwzględniająca piksele”, czyli zawsze miała szerokość 1 piksela, niezależnie od aktualnie zastosowanych przekształceń skalowania. Zdaję sobie sprawę, że może to być niemożliwe, ponieważ celem SVG jest niezależność od pikseli.

Kontekst jest następujący:

Mam element SVG z ustawionymi atrybutami viewBox i preserveAspectRatio. Wygląda mniej więcej tak

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

Oznacza to, że kiedy skaluję ten element, rzeczywiste kształty w nim skalują się odpowiednio (do tej pory tak dobrze).

Jak widać, skonfigurowałem viewBox tak, że początek znajduje się w środku. Chciałbym narysować oś X i Y w tym elemencie, co robię w ten sposób:

<line x1="-1000" x2="1000" y1="0" y2="0" />

Ponownie, to działa dobrze. Idealnie byłoby jednak, gdyby ta oś zawsze miała szerokość tylko 1 piksela. Nie interesuje mnie, że osie stają się grubsze, gdy skaluję element nadrzędny svg.

Więc mam przerąbane?

svg visualization

— wxs
źródło

129

Możesz użyć vector-effectwłaściwości ustawionej na non-scaling-stroke, zobacz dokumentację . Innym sposobem jest użycie transform(ref).

To zadziała w przeglądarkach obsługujących te części z SVG Tiny 1.2, na przykład Opera 10. Rozwiązanie awaryjne obejmuje napisanie małego skryptu, aby zrobić to samo, po prostu odwrócić CTM i zastosować go na elementach, które nie powinny być skalowane.

Jeśli chcesz ostrzejszych linii, możesz również wyłączyć wygładzanie krawędzi ( shape-rendering=optimizeSpeedlub shape-rendering=crispEdges) i / lub bawić się pozycjonowaniem.

— Erik Dahlström
źródło

Niestety jest to aplikacja XUL i wydaje się, że nie obsługuje jeszcze efektu wektorowego. No cóż.

— wxs

Powinno to pojawić się w Firefoksie 15 wszystko w porządku, więc powinieneś być w stanie go używać po zbudowaniu aplikacji XUL na gecko 15.

— Robert Longson

IE11 nadal nie obsługuje vector-effectwłaściwości. Czy można osiągnąć taki sam efekt jak vector-effect: non-scaling-strokew IE11?

— merlin

@merlin tak, z js można to emulować w IE.

— Erik Dahlström

@merlin sklonuj element (ustawiając fillna nonei odwrotnie dla stroke), oblicz i ustaw odpowiednie transformacje (jedną dla części wypełnienia i jedną dla części obrysu). Na pewno będzie trochę bałaganu, ale tak jest - możesz również poprosić firmę Microsoft o dodanie obsługi. W każdym razie myślę, że twoje pytanie zasługuje na to, aby być samodzielnym pytaniem.

— Erik Dahlström