Question

这是我在这里的第一个问题，如果格式不合适，请道歉。我正在玩使用SVG和CSS动画的径向进度条。但是，我很难确定半径和CY，CX值。我的SVG的总宽度是140px，所以我认为我的半径是70px，但我应用了14px的笔画，那么它是63px吗？另外，通过旋转，我注意到你也有CY，CX也定义了圆的中心点。我想这与我的半径相同？

这里有一个小提琴来说明。您会发现圆圈并不精确地适合容器内部。我做错了什么，这些价值是如何计算的？

<svg width="140" height="140">
    <circle class="outer" cx="70" cy="70" r="63" transform="rotate(-90, 70, 70)"/>
</svg>

我的小提琴：https://jsfiddle.net/xu402goo/

谢谢！ :)

Answer 1

我想我发现了这个问题。 FF错误修复似乎导致问题，但我的cx，cy和r似乎是正确的。

-moz-transform: rotate(-89deg) translateX(-140px);

https://jsfiddle.net/xu402goo/1/

我不知道在宽度/高度上使用viewBox是否有好处？

SVG在旋转和行程中应用圆圈的CY，CX

1 个答案: