| Summary: | vector-effect: non-scaling-stroke has no effect on a path with zero length | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Rich Harris <richard.a.harris> |
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | sabouhallawa, zimmermann |
| Priority: | P2 | ||
| Version: | Safari Technology Preview | ||
| Hardware: | Mac | ||
| OS: | macOS 10.14 | ||
*** This bug has been marked as a duplicate of bug 208441 *** |
The CSS property `vector-effect: non-scaling stroke` maintains an SVG element's stroke width regardless of any transforms that have been applied to it, including transforms resulting from a viewBox. When applied to a `<path>` element with a path length of zero, it has no effect. To reproduce, create an HTML page with the following code and open it in Safari: ```html <svg preserveAspectRatio="none" viewBox="0 0 100 100"> <path stroke="red" d="M25 50 A0 0 0 0 1 25 50"></path> <path stroke="blue" d="M75 50 A0 0 0 0 1 75.0001 50"></path> </svg> <style> svg { width: 100%; height: 500px; border: 1px solid black; } path { stroke-width: 20px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } </style> ``` Expected result: the red dot and the blue dot are identically-sized. This is what happens in Chrome and Firefox. Actual result: the red dot is larger, and stretched to the same degree as the SVG itself.