我创建了带有填充描边颜色的圆圈的SVG图像。我无法从顶部位置逆时针方向填充颜色。如何使用内联 CSS 逆时针方向填充(需要使用内联 CSS 进行(。我尝试了小提琴，添加后它可以工作：
transform="rotate(-90deg)"
它适用于Linux浏览器，但不适用于Windows Chrome。
<svg width="100" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="60" cy="60" r="24" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle cx="60" cy="60" r="12" fill="none" stroke="red" stroke-width="26" stroke-width="12" stroke-dasharray="65" stroke-dashoffset="0" transform-origin="center"/>
</svg>如何使用内联 CSS 从 Windows Chrome 浏览器中 SVG 圆圈的顶部位置(从 12 点钟点开始(填充颜色？
SVG 代码：
<svg width="100" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" stroke-dasharray="339.292" stroke-dashoffset="200" transform="rotate(-90)" transform-origin="center" />
</svg>圆圈上虚线描边的起始位置是 3 点钟位置，顺时针方向进行。正如你所发现的。
要从 12 点钟位置开始，只需旋转 -90 度即可。 你已经解决了。
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12"
stroke-dasharray="339.292" stroke-dashoffset="200" transform ="rotate(-90, 60,60)"/>
</svg>要让破折号沿逆时针方向前进，您可以：
- 水平翻转圆圈，或
- 否定
stroke-dashoffset
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12"
stroke-dasharray="339.292" stroke-dashoffset="-200" transform ="rotate(-90, 60,60)"/>
</svg>以下是您要实现的目标。您需要找到显示逆时针填充的正确角度。我发现逆时针角度设置为 -240。
transform="rotate(-240)"
我还添加了 2 个额外的动画旋转 svg，以防万一向您展示。在下面查看我的科佩本。
或者，您也可以使用圆圈中的 style 属性以内联方式设置转换属性。
https://codepen.io/Nasir_T/pen/mXeWgj
希望这有帮助。