将新的svg元素转换为路径

时间:2016-05-16 21:14:37

标签: svg path converter polyline ellipse

我正在使用一个新的插图画家svg文件,我想,我想在其中制作动画,但我在几个问题中招致了这意味着我不知道怎么做与椭圆,折线和圆相互作用。我想知道如何至少转换如何将椭圆元素转换为路径元素。这是我的档案:

<svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve">
                    <style type="text/css">
                        .st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                    </style>
                    <g>

                        <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2783 53.2037)" class="st0" cx="53.1" cy="53.5" rx="38.1" ry="38.1"/>
                        <polyline class="st0" points="32,48.8 32,35.8 41.6,48.8 41.6,35.8   "/>
                        <polyline class="st0" points="65.2,48.8 65.2,35.8 74.9,48.8 74.9,35.8   "/>
                        <polyline class="st0" points="58.2,69.7 58.2,56.7 52.8,64 47.5,56.7 47.5,69.7   "/>
                        <circle class="st0" cx="53.6" cy="42.3" r="6.5"/>
                        <circle class="st0" cx="70.7" cy="63.2" r="6.5"/>
                        <path class="st0" d="M41.1,58.2c-1.1-0.9-2.6-1.5-4.1-1.5c-3.6,0-6.5,2.9-6.5,6.5c0,3.6,2.9,6.5,6.5,6.5c1.6,0,3.1-0.6,4.3-1.6
                        v-4.6H37"/>
                    </g>
                </svg>

是否存在可以为我做这项工作的任何在线转换器?

1 个答案:

答案 0 :(得分:2)

如果我理解正常,你想要为svg路径设置动画吗?那你的意思是为它的动作制作动画吗?如果是的话,我为此制作了一个插件,它支持rect,circle,line和polygon:zPath.js

或者,如果您只想要一个解决方案将任何元素转换为路径是的Flatten.js据我所知,我没有使用它我在this帖子上找到了