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

编程问答 2022-06-12

问题描述

我想为2条SVG路径设置动画。 为此您需要类似的节点。 如果path1有一个bezier，则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>

解决方法

路径定义

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>

animationanimationbeziersvg