Bug 208475
| 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 | ||
Rich Harris
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Said Abou-Hallawa
*** This bug has been marked as a duplicate of bug 208441 ***