时间戳

首页 > 解决方案 > 长度为 0 的 svg 贝塞尔曲线的坐标

animation - 长度为 0 的 svg 贝塞尔曲线的坐标

问题描述

我想为 2 条 svg 路径设置动画。为此你需要类似的节点。如果 path1 有一个贝塞尔曲线，那么 path2 也必须在同一个节点上有它。所以我插入c0 0 0 0 0 0到path2。但它改变了第二个形状。我能做些什么？

<html>
 
        <title>Page Title</title>
    </head>
    <body>
        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
 preserveAspectRatio="xMidYMid meet">

           <g 
fill="#000000" stroke="none">
               

<path fill ="red" d= "m50 50 50 50 100 100 50 100" />
<path d= "m0 0 50 50 100 100 50 100" />
<path fill = "blue" d= "m0 0 c0 0 0 0 0 0 50 50 100 100 50 100" />

</g>
</svg>
        
    </body>
</html>

标签： animationsvgbezier

解决方案

路径定义

m 0 0 50 50 100 100 50 100

相当于

m 0 0
l 50 50
l 100 100
l 50 100

一个等效的贝塞尔曲线可能是

m 0 0
c 0 0 50 50 50 50
c 0 0 100 100 100 100
c 0 0 50 100 50 100"

我选择将第一个控制点放在线/贝塞尔曲线的开头。最后是第二个。我可以选择把它们都放在开头，或者都放在结尾。

如果您使用路径进行动画运动，则应将控制点放置在沿线的 1/3 和 2/3 点处。例如。：

m 0 0
c 16.7 16.7 33.3 33.3 50 50
c 33.3 33.3 66.7 66.7 100 100
c 0 0 16.7 33.3 33.3 66.7 50 100"


<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
 preserveAspectRatio="xMidYMid meet">

  <g fill="#000000" stroke="none">

    <path fill ="red" d= "m50 50 50 50 100 100 50 100" />
    <path d= "m0 0 50 50 100 100 50 100" />
    <path fill = "blue" d= "
      m 0 0
      c 0 0 50 50 50 50
      c 0 0 100 100 100 100
      c 0 0 50 100 50 100" />

  </g>
</svg>

推荐阅读