Bug 208475 - vector-effect: non-scaling-stroke has no effect on a path with zero length
Summary: vector-effect: non-scaling-stroke has no effect on a path with zero length
Status: RESOLVED DUPLICATE of bug 208441
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-03-02 14:42 PST by Rich Harris
Modified: 2020-03-02 17:56 PST (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Rich Harris 2020-03-02 14:42:34 PST
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.
Comment 1 Said Abou-Hallawa 2020-03-02 17:56:16 PST

*** This bug has been marked as a duplicate of bug 208441 ***