0

I have the following SVG path string:

var pathStepBack = "m 12 20  l 10 -8  l  0 16  Z  m 12 -8 l 5 0  l 0 16  l -5 0 Z";

It has two non-contiguous areas like a step back VCR button. When it renders in Firefox it looks like this:

enter image description here

So, the gap between the two areas is getting filled with the fill color. Of course, I can create two different paths, but ideally I would like to have a single (clickable) object. Is there any way to modify the string so that it does not fill the area between the two closed regions with color?

Tyler Durden
  • 11,156
  • 9
  • 64
  • 126

1 Answers1

0

It appears to just be a bug in the SVG renderer/interpreter when the separation between shapes is only one pixel.

If you change the separation to be 2 pixels by changing m 12 -8 to m 13 -8 then the path appears correctly.

Tyler Durden
  • 11,156
  • 9
  • 64
  • 126