如何通过SVG元素使用snap.svg循环并在每个那些路径属性的阵列 [英] how to use snap.svg to loop through svg elements and create array of each ones path attribute

问题描述

我有了它包含几个不同的路径SVG图像。我怎么会去使用捕捉到'循环'的SVG图像并创建每个元素作为变量名，每个元素的路径属性和数组的值的ID数组。 （最后我想动画路径摇身一变。）

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;  - 发电机：Adobe Illustrator中16.0.4，SVG导出插件。 SVG版本：6.00构建0） - ＆GT;
！＆LT; D​​OCTYPE SVG PUBLIC -  // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
＆LT; SVG版本=1.1的xmlns =htt​​p://www.w3.org/2000/svg的xmlns：XLink的=htt​​p://www.w3.org/1999/xlinkX =0像素Y =0像素WIDTH =612px
     高度=792px视框=0 0 612 792使背景=新0 0 612 792XML：空间=preserve＆GT;
＆LT克ID =开始＆GT;
    ＆LT;路径ID =形 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/＆GT;
＆所述; / g取代;
＆LT克ID =中间＆GT;
    ＆LT;路径ID =shape_1补=＃590E0ED =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/＆GT;
＆所述; / g取代;
＆LT克ID =最终＆GT;
    ＆LT;路径ID =shape_2补=＃146734D =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/＆GT;
＆所述; / g取代;
＆LT; / SVG＆GT;
 

解决方案

如果您使用全选方法，它将带给回去就好捕捉对象的数组（听起来像你需要这个，而不是一个数组）。因此，像这样或许（未经测试）。

  VAR someObj中= {};
变种GS = s.selectAll（'G'）;
gs.forEach（功能（EL）{
    VAR P = el.select（'路径'）;
    someObj中[el.attr（'身份证'）] = p.attr（'D'）;
}）;
 

小提琴

I have an svg image that has several different paths within it. How would I go about using snap to 'loop' the svg image and create an array with the ID of each element as a variable name and the path attribute of each element and the value of that array. (Eventually I would like to animate the path morphs.)

<?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>

解决方案

If you use the selectAll method, it will bring to back an Array like Snap object (sounds like you need this rather than an array). So something like this maybe (untested).

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

fiddle

这篇关于如何通过SVG元素使用snap.svg循环并在每个那些路径属性的阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！