Obecnie budujemy aplikację SVG opartą na przeglądarce. W tej aplikacji użytkownik może stylizować i ustawiać różne kształty, w tym prostokąty.
Kiedy zastosuję a stroke-width
do rect
powiedzmy elementu SVG 1px
, obrys jest stosowany rect
w różny sposób do przesunięcia i wstawki przez różne przeglądarki. Jest to kłopotliwe, zwłaszcza gdy próbuję obliczyć zewnętrzną szerokość i wizualną pozycję prostokąta i ustawić go obok innych elementów.
Na przykład:
- Firefox dodaje wstawkę 1px (dolny i lewy) oraz przesunięcie 1px (górny i prawy)
- Chrome dodaje wstawkę 1px (u góry i po lewej) i przesunięcie 1px (u dołu i po prawej)
Moim jedynym rozwiązaniem do tej pory było narysowanie rzeczywistych granic (prawdopodobnie za pomocą path
narzędzia) i umieszczenie granic za obrysowanym elementem. Ale to rozwiązanie jest nieprzyjemnym obejściem i wolałbym nie iść tą drogą, jeśli to możliwe.
Moje pytanie brzmi: czy możesz kontrolować sposób stroke-width
rysowania pliku SVG na elementach?
paint-order
parametr, w którym można określić, że wypełnienie powinno być renderowane na szczycie obrysu, aby uzyskać „wyrównanie zewnętrzne”, patrz jsfiddle.net/hne0kyLg/1