css – SVG路径曲线在相反方向上制作动画

2019年7月20日 431次阅读

我在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表示您想要旋转椭圆的角度.之后你必须提供两个以逗号分隔的标志.第一个标志表示你是想要在起点和终点之间采用最短(0)或最长(1)路径.第二个标志表示你是否想要在开始点和结束点之间采用逆时针(0)路径或顺时针(0)路径(您可以更改两个标志以查看更改).最后一个坐标是您的终点,即第一条路径为55,10,第二条路径为105,60.

点赞