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

Posted 2023-03-06

【中文标题】SVG 圆的样式在 Firefox 中不起作用，浏览器删除了半径属性

【英文标题】：Styling of SVG circle doesn´t work in Firefox, browser removes radius property

【发布时间】：2019-01-04 05:03:46

【问题描述】：

我正在尝试使用 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 属性丢失

【参考方案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>

【讨论】：

好主意，通过使用 [attr.cx]、[attr.cy] 和 [attr.r] 我还可以使用 typescript 动态设置这些变量

是否有任何 ployfill 可以让 firefox 使用最新的 SVG2 实现？

@JohnDizzle 我不知道这是否可以用 polyfill 解决。此外，由于 chrome 支持演示属性cx、cy 和r，因此您应该回退到在任何地方使用这些属性。这样就简单多了。

【参考方案2】：

@JohnDizzle，虽然 Chrome 长期以来一直支持 circle 的 css r 属性，但我注意到我在 Mac 上的最新版本 Firefox 74.0b8，现在也支持。

另外，Safari 13.0.5 支持 css r，虽然我不记得过去是否没有这样做。

【参考方案3】：

如果您希望 cx、cy、r 可以在 Chrome 以外的任何地方工作，我们过去需要使用属性，但现在 Safari 和 Firefox 已经赶上，您的代码应该可以在所有这些浏览器中工作。

将 cx、cy 和 r 作为样式是 SVG 2 规范的一个新特性。许多属性现在改为映射的 CSS 属性。

【讨论】：

是否有任何 ployfill 可以让 firefox 使用最新的 SVG2 实现？

SVG 2 有很多变化，Firefox 实现了一些部分，Chrome 其他部分，Edge 和 Safari 也实现了一些位。有一些重叠，但它是浏览器之间的完全错乱的东西。没有 uber polyfill 可以确保一致性。