Hello I am new to SVG and I have a problem with rotate clockwise circle. Here's the code I'm working on. My code rotates into counter clockwise. I don't know how to make it correct.
.another-circle {
stroke-dasharray: 227;
stroke-dashoffset: 227;
transition: stroke-dashoffset 2s linear;
}
.another-circle:hover {
stroke-dashoffset: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48" (click)="backToQues()">
<g fill="none" fill-rule="evenodd">
<g transform="matrix(-1 0 0 1 44 4)">
<circle transform="rotate(-90 20 20)" class="another-circle" cx="20" cy="20" r="22" stroke="#444" fill="#26C4C7" stroke-width="4"/>
</g>
<path stroke="#FFF" stroke-width="2" d="M28 16l-7.5 7.5L28 31"/>
</g>
</svg>
Easy solution is to simply set your starting
stroke-dashoffset
to its negative value (-227
).But note that the circumference of your circle is
2π * circle radius
or2π * 22
or~ 138.23
. So you would be better set your values to this to get your animation timings correct.And finally, your selector would be better targeting the parent
<g>
element since as it was, hovering the<path>
was canceling the stroke.