SVG transform rotate into clockwise circle with ma

2019-08-12 23:45发布

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>

标签: html css svg
1条回答
再贱就再见
2楼-- · 2019-08-13 00:25

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 or 2π * 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.

.another-circle {
  stroke-dasharray: 139;
  stroke-dashoffset: -139;
  transition: stroke-dashoffset 2s linear;
}
.hover-handler:hover .another-circle {
  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" class="hover-handler">
        <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>

查看更多
登录 后发表回答