我创建了带有填充笔触颜色的圆圈的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>关于css - SVG Circle文件在Windows上从顶部沿逆时针方向笔触，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48563779/