我正在尝试在两个形状之间创建一个SMIL动画补间,我知道这两个形状需要具有相同数量的坐标。我遇到的问题是当我从Illustrator中导出两个SVG时,坐标与有多少个坐标不匹配。两个形状都是从相同的源创建的,没有添加或删除额外的点,只是顶部的曲线被整理出来。
以下是我在Codepen http://codepen.io/tands/pen/LEmoOK及以下的SVG
<!-- smile circle -->
<svg version="1.1" x="0px" y="0px" viewBox="0 0 453.5 290" enable-background="new 0 0 453.5 290" xml:space="preserve">
<path fill="#000000" d="
M226.8,
34.9
C146.3,
34.9,
71.5,
22,
8.9,
0
C3.1,
20.1,
0,
41.3,
0,
63.2
C0,
188.5,
101.5,
290,
226.8,
290
S453.5,
188.5,
453.5,
63.2
c0-21.9-3.1-43.1-8.9-63.2
C382.1,
22,
307.2,
34.9,
226.8,
34.9z
H0z
"/>
</svg>
<!-- partial circle -->
<svg version="1.1" x="0px" y="0px" viewBox="0 0 453.5 290" enable-background="new 0 0 453.5 290" xml:space="preserve">
<path fill="#000000" d="
M8.9,
0
C3.1,
20.1,
0,
41.3,
0,
63.2
C3.1,
20.1,
0,
41.3,
0,
63.2
C0,
188.5,
101.5,
290,
226.8,
290
S453.5,
188.5,
453.5,
63.2
c0-21.9-3.1-43.1-8.9-63.2
C0,
0,
0,
0,
0,
0
H8.9z
"/>
</svg>
所以我想我的问题是如何在codepen上实现两个形状之间的形状补间,即使它们有不同的坐标?