我在 adobe illustrator 中创建了一个 svg 并使用了它生成的代码。我正在尝试为 svg 绘图设置动画。我的 svg 元素:
<svg width="100px" height="100px">
<path fill="none" d="M5,60c0-24.873,20.127-45,45-45" />
<path fill="none" d="M95,60c0-24.873-20.127-45-45-45" />
</svg>
第一条曲线是顺时针方向的动画,我想要第二条曲线是逆时针方向的动画。您可以在问题末尾看到演示片段。
请解释我如何以顺时针方向为第二条路径设置动画。另请说明是否可以提供两条路径的曲线数据。谢谢
svg {
width: 300px;
}
svg path {
fill-opacity: 0;
stroke: #50514F;
stroke-width: 5;
stroke-dasharray: 870;
stroke-dashoffset: 870;
animation: draw 10s infinite linear;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="100px" height="100px">
<path fill="none" d="M5,60c0-24.873,20.127-45,45-45" />
<path fill="none" d="M95,60c0-24.873-20.127-45-45-45" />
</svg>
最佳答案
第二条路径以逆时针方式开始,因为起点定义在终点的右侧。当您的要求只是圆弧时,为什么要使用复杂的三次贝塞尔曲线? 对于使用和处理起来太简单的方法,您可以使用椭圆曲线。将您定义的路径更改为这两个路径定义,您将实现您想要的:
<path fill="none" d="M5,60 A50,50 0 0,1 55,10" />
<path fill="none" d="M55,10 A50,50 0 0,1 105,60"/>
M 旁边的坐标是您的起点。A 旁边的值分别表示您的椭圆曲线的水平和垂直半径(两者都与您想要的相同圆形曲线)。之后的 0 表示您要旋转椭圆的 Angular 。之后,您必须提供两个由 逗号 分隔的标志。第一个标志表示您是要取最短的 (0) 还是最长的 (1) 起点和终点之间的路径。第二个标志表示您是要采用逆时针 (0) 路径还是顺时针 (0>) 起点和终点之间的路径(您可以更改两个标志以查看更改)。最后一个坐标是您的终点,第一条路径为 55,10 并且105,60 第二个。
关于css - SVG 路径曲线在相反方向上设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39617484/