如何使用snap.svg循环svg元素并创建每个元素的数组path属性

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

本文关键字：元素 svg 属性 数组 path 何使用 snap 循环 创建      更新时间：2023-09-26

我有一个svg图像，其中有几个不同的路径。我该如何使用snap来"循环"svg图像并创建一个数组，将每个元素的ID作为变量名，每个元素的路径属性和该数组的值。（最终我想为路径变形设置动画。）

<?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方法，它将返回一个类似Array的Snap对象（听起来你需要这个而不是数组）。所以像这样的事情可能（未经测试）。

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

小提琴

相关文章：