Naprawiono szerokość obrysu w SVG

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?

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.