SVG变换旋转到带有矩阵的顺时针圆 [英] SVG transform rotate into clockwise circle with matrix

问题描述

你好，我是SVG的新手，我对顺时针旋转圆圈有疑问.这是我正在处理的代码.我的代码逆时针旋转.我不知道如何使它正确.

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>

推荐答案

简单的解决方案是将起始stroke-dashoffset设置为其负值(-227).

Easy solution is to simply set your starting stroke-dashoffset to its negative value (-227).

但是请注意，圆的周长是2π * circle radius或2π * 22或~ 138.23.因此，最好将此值设置为正确的动画时间.

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.

最后，您的选择器将更好地针对父<g>元素，因为按原样，将鼠标悬停在<path>上将取消笔划.

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>

这篇关于SVG变换旋转到带有矩阵的顺时针圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！