![Stroke]( "Stroke")
HTML: <svg version="1.1" id="parents-icon" 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"> <path class="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"/> <path class="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"/> </svg> CSS:.non-scaling-stroke { vector-effect: non-scaling-stroke;}.stroke-2 { stroke-width: 2; stroke-miterlimit: 0;}.stroke-blue { stroke: #009bdf;}.no-fill { fill: none;}.stroke-rounded { stroke-linecap: round; stroke-linejoin: round;}解决方案显然，如果使用路径而不是圆形，则不会发生这种情况.另外，由于这是您的代码，因此您在svg元素上重复了id.在下一个示例中，我使用一个函数来创建一个圆作为路径.如果您不想使用javascript，则可以从检查器获取路径的d属性.希望对您有帮助. const SVG_NS = "http://www.w3.org/2000/svg";function drawCircle(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;} <div style="width: 200px"> <svg version="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"> <path class="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"/> <path class="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"/>--> <g id="circles1"> </g> </svg> </div><div style="width: 200px"> <svg version="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"> <path class="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"/> <path class="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"/>--> <g id="circles2"> </g> </svg> </div> 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 last/first points seem to be stretched to the top left point of the page.e.g. https://drive.google.com/file/d/1gY-SO2fbtDRb9AGfeLXvJg3oCKosdrKd/view?usp=sharinge.g. https://drive.google.com/file/d/1lpua-qZyiDlcfFKjLfXWgP8wOa_tZh69/view?usp=sharingThe issue only seems to apply to circles, if I change the tag to an ellipse e.g. <ellipse class="stroke-blue stroke-2 no-fill stroke-rounded non-scaling-stroke" cx="69.9" cy="60.1" rx="40.8" ry="40.8"/>the issue goes away, and also if I remove the vector-effecte.g. <circle class="stroke-blue stroke-2 no-fill stroke-rounded" cx="69.9" cy="60.1" r="40.8"/>Running the mouse cursor over the SVG also sometimes fixes the problem.Codepen: https://codepen.io/anon/pen/WWQRqgHTML: <svg version="1.1" id="parents-icon" 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"> <path class="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"/> <path class="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"/> </svg>CSS:.non-scaling-stroke { vector-effect: non-scaling-stroke;}.stroke-2 { stroke-width: 2; stroke-miterlimit: 0;}.stroke-blue { stroke: #009bdf;}.no-fill { fill: none;}.stroke-rounded { stroke-linecap: round; stroke-linejoin: round;} 解决方案 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.const SVG_NS = "http://www.w3.org/2000/svg";function drawCircle(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;}<div style="width: 200px"> <svg version="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"> <path class="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"/> <path class="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"/>--> <g id="circles1"> </g> </svg> </div><div style="width: 200px"> <svg version="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"> <path class="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"/> <path class="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"/>--> <g id="circles2"> </g> </svg> </div> 这篇关于内联SVG< circle>当与矢量效果结合使用时，Firefox会中断:non-scaling-stroke的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-29 12:38