我想设置2条svg路径的动画。为此你需要相似的节点。若路径1有一个bezier，则路径2也必须在同一节点上有它。因此，我将c0 0 0 0 0 0插入到路径2。但是它改变了第二形状。我能做什么？
<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>