Bug 273992 – Svg rendering for stroke-dasharray is different across browsers

• Status: NEW
• Component: SVG

[Karl Dubost]

Created attachment 471354 [details]
rendering in safari, firefox, chrome

Go to https://yuanchuan.dev/fun-with-stroke-dasharray

Scroll to Hearts at the corners and notice the difference of rendering in between Firefox, Chrome and Safari.
The top left corner heart is rounded.



The code example is written in a special syntax provided by https://css-doodle.com/svg/

svg {
  viewBox: 0 0 10 10 p 2;
  rect {
    width, height: 10;
    fill: none;
    stroke: #000;
    stroke-linecap: round;
    stroke-dasharray: 4 6;
    stroke-dashoffset: 2;
    stroke-width: 4;
  }
}

To verify if this can be converted into an isolated svg file.

[Radar WebKit Bug Importer]

<rdar://problem/127866341>

[Ahmad Saleem]

@Karl - I have one similar bug in the past where on the edge, there was corner missing. Will try to find it.

[Ahmad Saleem]

Just to add 'Layer-based SVG Engine' does not fix this, so adding 'LayerBasedSVGEngine' tag.