SVG 圆的样式在 Firefox 中不起作用，浏览器删除了 radius 属性

Question

我正在尝试使用 SVG 和 CSS 创建一种进度环，到目前为止，它在 Chrome 中有效。但是，Firefox（61.0.1（64 位））给我带来了问题并且不显示我的圈子。我已经尝试使用这个问题的方法，但没有成功。有没有办法让戒指的样式在 Chrome 和 Firefox（均为最新版本）中正确显示？我在运行时添加样式有问题吗[ngStyles]？这是计算空间和显示进度所必需的

\n\n

我有一个关于代码沙箱的运行示例，它也只适用于 chrome，但不适用于 Firefox。

\n\n

超文本标记语言

\n\n

<div class="my-progress-ring">\n    <svg>\n        <circle class="progress" [ngStyle]="getCircleStyles()"/>\n    </svg>\n</div>\n

\n\n

CSS

\n\n

div.my-progress-ring {\n  width: 50px;\n  height: 50px;\n}\n\nsvg {\n  height: 100%;\n  min-height: 100%;\n  width: 100%;\n  min-width: 100%;\n}\n\ncircle.progress {\n  stroke: red;\n  stroke-width: 4px;\n  stroke-linecap: round;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  cx: 50%;\n  cy: 50%;\n  fill: transparent;\n}\n

\n\n

打字稿

\n\n

public getCircleStyles(): any {\n    return {\n      \'r\': 21,\n      \'stroke-dasharray\': 131.947,\n      \'stroke-dashoffset\': 32.987\n    };\n  }\n

\n\n

---

\n\n

编辑：
\n在此示例中，getCircleStyles 的数字是硬编码的。在我的应用程序 i\xc2\xb4m 中，使用函数根据进度环的大小和当前进度来计算数字。

\n\n

编辑2：
\nFirefox似乎不喜欢我的stlying值的某些属性。缺少 r 属性\n

\n

Answer 1

似乎您发现SVG 2.0 规范的实现不一致的实现不一致。或者，也许 Firefox 尚未完全支持 SVG 2.0。该规范指出：

\n\n

\n

某些样式属性不仅可以在样式表和 \xe2\x80\x98style\xe2\x80\x99 属性中指定，还可以在表示属性中指定。

\n

\n\n

因此，样式表和属性都应该有效。

\n\n\n\n

快速解决方法是将r,cx和cy 演示文稿属性添加到您的circle元素中（如此处建议的）：

\n\n

<circle _ngcontent-c1="" class="progress" style="stroke-dasharray: 131.947; stroke-dashoffset: 32.987;" cx="50%" cy="50%" r="21" fill="transparent" ng-reflect-ng-style="[object Object]"></circle>\n

\n