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

Question

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

我有一个正在运行的 example on code sandbox对你来说，它也只适用于 chrome，但不适用于 Firefox。

HTML

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

CSS

div.my-progress-ring {
  width: 50px;
  height: 50px;
}

svg {
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
}

circle.progress {
  stroke: red;
  stroke-width: 4px;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  cx: 50%;
  cy: 50%;
  fill: transparent;
}

typescript

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

---

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

编辑 2:
似乎 Firefox 不喜欢我的 STLying 值的某些属性。缺少 r 属性

Answer 1

您似乎发现了 the SVG 2.0 spec 的不一致实现在火狐中。或者，也许 Firefox 还没有完全支持 SVG 2.0。规范指出:

Some styling properties can be specified not only in style sheets and ‘style’ attributes, but also in presentation attributes.

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

---

快速修复是将 r、cx 和 cy presentation 属性 添加到您的圈子 元素 ( as suggested here ):

<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>