Illustrator SVG不对称导出形状补间的坐标

时间:2015-02-26 10:30:45

标签: svg coordinates adobe-illustrator tween smil

我正在尝试在两个形状之间创建一个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上实现两个形状之间的形状补间,即使它们有不同的坐标?

0 个答案:

没有答案