Inline Svg Breaks In Firefox When Combined With Vector-effect: Non-scaling-stroke

I have a number of inline SVGs in a website I maintain, and they're broken in Firefox. Each is broken when vector-effect: non-scaling-stroke is applied. They still render, but the

Solution 1:

Apparently this doesn't happen if you use a path instead of a circle. Also, as it is your code in this moment you have a repeating id for the svg elements.

In the next example I'm using a function to create a circle as a path. If you don't want to use javascript you can get the d attribute for the path from the inspector. I hope it helps.

constSVG_NS = "http://www.w3.org/2000/svg";



functiondrawCircle(cx, cy, r, parent) {
  let circle_path = document.createElementNS(SVG_NS, "path");
  let d = `M${cx + r},${cy} A${r},${r} 0 0 0 ${cx -
    r},${cy}  A${r},${r} 0 0 0 ${cx + r},${cy}z`;
  circle_path.setAttributeNS(null, "d", d);
  parent.appendChild(circle_path);
  return circle_path;
}


let circles = []

circles.push(drawCircle(149.5, 100.4, 27.1, circles1));
circles.push(drawCircle(69.9, 60.1, 40.8, circles1));
circles.push(drawCircle(149.5, 100.4, 27.1, circles2));
circles.push(drawCircle(69.9, 60.1, 40.8, circles2));

circles.map(c=>{
  c.setAttribute("class", "stroke-blue stroke-2 no-fill stroke-rounded grey-stroke-hover non-scaling-stroke")
})

/* Start the magic css for locking down svg stroke width */.non-scaling-stroke {
  vector-effect: non-scaling-stroke;
}

/* End magic */.blue-fill {
    fill: #009bdf;
}

.stroke-2 {
    stroke-width: 2;
    stroke-miterlimit: 0;
}
.stroke-blue {
    stroke: #009bdf;
}
.no-fill {
    fill: none;
}
.stroke-rounded {
    stroke-linecap: round;
    stroke-linejoin: round;
}

<divstyle="width: 200px"><svgversion="1.1"id="parents_icon1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"viewBox="0 0 200 200"style="enable-background:new 0 0 200 200;"xml:space="preserve"><pathclass="stroke-blue stroke-2 no-fill non-scaling-stroke"d="M116.5,137.6c0,0-17.5-22.6-46.7-22.6c-32,0-52,24.1-58.9,43.9c0,0,25.8,19.8,56.9,19.8c20.2,0,32.4-5,32.4-5"/><pathclass="stroke-blue stroke-2 no-fill grey-stroke-hover non-scaling-stroke"d="M109.8,166.3c0,0,15.3,13.5,39.5,13.5s39.8-13.5,39.8-13.5S178.9,137,149.5,137S109.8,166.3,109.8,166.3z"/><!--<circle class="stroke-blue stroke-2 no-fill stroke-rounded grey-stroke-hover non-scaling-stroke" cx="149.5" cy="100.4" r="27.1"/>
                          <circle class="stroke-blue stroke-2 no-fill stroke-rounded non-scaling-stroke" cx="69.9" cy="60.1" r="40.8"/>--><gid="circles1"></g></svg></div><divstyle="width: 200px"><svgversion="1.1"id="parents_icon2"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"viewBox="0 0 200 200"style="enable-background:new 0 0 200 200;"xml:space="preserve"><pathclass="stroke-blue stroke-2 no-fill non-scaling-stroke"d="M116.5,137.6c0,0-17.5-22.6-46.7-22.6c-32,0-52,24.1-58.9,43.9c0,0,25.8,19.8,56.9,19.8c20.2,0,32.4-5,32.4-5"/><pathclass="stroke-blue stroke-2 no-fill grey-stroke-hover non-scaling-stroke"d="M109.8,166.3c0,0,15.3,13.5,39.5,13.5s39.8-13.5,39.8-13.5S178.9,137,149.5,137S109.8,166.3,109.8,166.3z"/><!--<circle class="stroke-blue stroke-2 no-fill stroke-rounded grey-stroke-hover non-scaling-stroke" cx="149.5" cy="100.4" r="27.1"/>
                          <circle class="stroke-blue stroke-2 no-fill stroke-rounded non-scaling-stroke" cx="69.9" cy="60.1" r="40.8"/>--><gid="circles2"></g></svg></div>