Question

你好我是SVG的新手，顺时针旋转圈有问题。这是我正在处理的代码。我的代码逆时针旋转。我不知道如何纠正它。

＆＃13;

.another-circle {
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
  transition: stroke-dashoffset 2s linear;
}

.another-circle:hover {
  stroke-dashoffset: 0;
}

＆＃13;

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

＆＃13;

Answer 1

简单的解决方案是将您的起始stroke-dashoffset设置为负值（{{1}}）。

但请注意，圈子的周长为-227或2π * circle radius或2π * 22。因此，您最好将值设置为此值，以使动画时序正确。

最后，您的选择器会更好地定位父~ 138.23元素，因为它原来是悬停<g>取消了中风。

<path>

.another-circle {
  stroke-dasharray: 139;
  stroke-dashoffset: -139;
  transition: stroke-dashoffset 2s linear;
}
.hover-handler:hover .another-circle {
  stroke-dashoffset: 0;
}

SVG变换用矩阵旋转成顺时针圆

1 个答案: