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

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

打字稿

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

---

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

编辑2：
似乎Firefox不喜欢我所隐含的某些属性值。缺少r属性

Answer 1

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

  

某些样式属性不仅可以在样式表和“样式”属性中指定，还可以在演示属性中指定。

因此，样式表和属性都应该起作用。

---

快速解决方案是将r，cx和cy 表示属性添加到您的circle元素（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>

Answer 2

@JohnDizzle，尽管Chrome长期以来一直支持circle的css @action addWhy() { ... // Adding why field Ember.run.schedule('afterRender', () => { // When this function has called, the component has already been re-rendered let fiveWhyInput = document.querySelector(`#five-why-${index}`) as HTMLTextAreaElement if (fiveWhyInput) fiveWhyInput.focus(); }) } 属性，但我注意到我在Mac上最新的Firefox 74.0b8版本现在也可以使用。

此外，Safari 13.0.5还支持css r，尽管我不记得以前是否没有这么做。

Answer 3

如果您希望cx，cy和r在Chrome之外的其他任何地方都可以使用，请使用其属性。

<svg>
  <circle cx="50" cy="50" r="50"/>
</svg>

当前只有Blink（即Chrome / Opera）支持cx，cy，r作为样式，这是SVG 2规范的一项新功能，现在许多属性都已映射到CSS属性中。