SVG Circle file stroke from top in anti clockwise direction on windows

问题

I created SVG Image with circles with filling stroke color. I am unable to fill color from top position in anti-clockwise direction. How to fill in anti-clockwise direction with inline CSS(need to do using inline css). i tried in fiddle it work with adding following css,

transform= rotate(-90deg)

it works for Linux browsers but not working with windows chrome.

JsFiddle

How to fill color from top position of SVG circle(from 12o'clk point) in Windows chrome browsers using inline css.

Following code for SVG.

<?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>

回答1:

The start position for dashed strokes on a circle is the 3 o'clock position, and proceeds clockwise. As you have discovered.

To start from the 12 o'clock position, just rotate by -90 degrees. You already worked that out.

<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>

To have the dash proceed in an anti-clockwise direction, you could either:

flip the circle horizontally, or
negate the 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>

回答2:

Is the following what you are trying to achieve. You need to find the right angle in which it will show the anti-clockwise fill. I found the angle to be set to -240 for anticlock-wise.

transform="rotate(-240)"

I also added in 2 extra animated spin svgs just in case to show you. Check out my copepen below.

Also alternately, you could use the style attribute in the circle to set the transform properties inline.

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

Hope this helps.

来源：https://stackoverflow.com/questions/48563779/svg-circle-file-stroke-from-top-in-anti-clockwise-direction-on-windows

标签

css

svg

transform