我正在尝试使用 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 的数字在此示例中是硬编码的。在我的应用程序中,我使用一个函数来根据进度环的大小和当前进度计算数字。
最佳答案
您似乎发现了 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>
关于html - SVG 圆的样式在 Firefox 中不起作用,浏览器删除了半径属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51551729/