Question

我用带有填充笔触颜色的圆圈创建了SVG图像。我无法从逆时针方向的顶部位置填充颜色。如何用内联CSS填充逆时针方向（需要使用内联css）。我试着用它来添加以下css，

transform= rotate(-90deg)

适用于Linux浏览器，但不适用于Windows Chrome。

JsFiddle

如何使用内联css在Windows Chrome浏览器中从SVG圈的顶部位置（从12o＆＃39; clk点）填充颜色。

以下代码为SVG。

＆＃13;

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<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>

＆＃13;

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>

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

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

Answer 2

以下是您要实现的目标。您需要找到它将显示逆时针填充的正确角度。我发现对于逆时针方向，角度设置为-240。

transform="rotate(-240)"

我还添加了2个额外的动画旋转svgs以防万一，以便向您展示。看看下面我的同事。

另外，您可以使用圆圈中的style属性来内联设置变换属性。

https://codepen.io/Nasir_T/pen/mXeWgj

希望这有帮助。

SVG Circle文件从窗口逆时针方向从顶部开始

2 个答案: