繁体   English   中英

如何使用snap.svg遍历svg元素并创建每个路径属性的数组

[英]how to use snap.svg to loop through svg elements and create array of each ones path attribute

我有一个svg图像,其中包含多个不同的路径。 我将如何使用快照“循环” svg图像并创建一个数组,其中每个元素的ID作为变量名,每个元素的path属性以及该数组的值。 (最终,我想为路径变形设置动画。)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px"
     height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g id="start">
    <path id="shape" d="M197.063,173.937c-34.624,8.446-44.945,28.214-37.234,56.383c-10.217,26.923-0.263,47.865,37.234,60.639
        c-27.426,18.955-33.862,37.69-36.17,56.383c55.893-14.307,98.408-8.579,131.915,10.638c31.761-17.963,45.708-39.883,45.745-64.894
        c-45.952,8.926-61.438-0.612-63.83-18.085c40.011-15.036,53.504-32.917,44.681-53.191
        C261.068,217.78,215.96,204.763,197.063,173.937z"/>
</g>
<g id="middle">
    <path id="shape_1" fill="#590E0E" d="M265.148,215.426c-34.624,8.446-113.03-13.275-105.319,14.894
        c-10.217,26.923,39.099,4.248,76.596,17.021c-27.426,18.955-73.224,81.307-75.532,100c55.893-14.307,98.408-8.579,131.915,10.638
        c31.761-17.963,45.708-39.883,45.745-64.894c-45.952,8.926-61.438-0.612-63.83-18.085c40.011-15.036,53.504-32.917,44.681-53.191
        C324.589,80.138,328.73,149.424,265.148,215.426z"/>
</g>
<g id="final">
    <path id="shape_2" fill="#146734" d="M31.106,44.149c-34.624,8.446,121.012,158.002,128.723,186.17
        c-10.217,26.923,39.099,4.248,76.596,17.021c-27.426,18.955-73.224,81.307-75.532,100c55.893-14.307,98.408-8.579,131.915,10.638
        c31.761-17.963,45.708-39.883,45.745-64.894c-45.952,8.926-61.438-0.612-63.83-18.085c40.011-15.036,53.504-32.917,44.681-53.191
        C202.381,169.062,47.715,12.327,31.106,44.149z"/>
</g>
</svg>

如果使用selectAll方法,它将带回像Snap对象这样的数组(听起来像您需要此而不是数组)。 因此,可能会这样(未经测试)。

var someObj = {};
var gs = s.selectAll('g');
gs.forEach(function(el) {
    var p = el.select('path');
    someObj[ el.attr('id') ] = p.attr('d');
});

小提琴

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM