css - SVG 圆形文件在 Windows 上以逆时针方向从顶部描边

Question

我创建了带有填充笔触颜色的圆圈的 SVG 图像。我无法从顶部位置逆时针方向填充颜色。如何使用内联CSS填充逆时针方向(需要使用内联CSS)。我尝试了 fiddle ，添加后它起作用了:

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>

Answer 1

圆上虚线笔划的起始位置是 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>

要使破折号沿逆时针方向前进，您可以:

1. 水平翻转圆圈，或者
2. 否定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>