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

Question

I created SVG Image with circles with filling stroke color. I am unable to fill color from the top position in an anti-clockwise direction. How to fill in an anti-clockwise direction with inline CSS (need to do using inline CSS). I tried in fiddle and it works after adding:

transform="rotate(-90deg)"

It works for Linux browsers but not working with 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>

How to fill color from the top position of SVG circle (from 12 o'clock point) in Windows Chrome browsers using inline CSS?

SVG-Code:

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

circle:last-child { transform:rotate(-90deg); } use " : " not " = " http://jsfiddle.net/k5cv8a8d/10/ — Yordan Ramchev, Feb 01 '18 at 13:52

score 5 · Answer 1 · answered Feb 01 '18 at 17:57

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>

To start from the 12 o'clock position, rotate by -90 degrees in windows chrome browser is not working. it works fine in linux chrome browsers — Siddu, Feb 05 '18 at 08:53
Thanks. transform="rotate(-90)" transform-origin="center" worked for me — Siddu, Feb 05 '18 at 12:05

Nasir T · Answer 2 · 2018-02-01T14:44:34.590

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.

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

2 Answers2

Linked