Question

我对整个SVG业务都有点新意，现在我遇到了一个我真不理解的问题。

我此刻制作了动画图标，并注意到反复选择g并应用它们并不适合我。为了问题，我做了一个例子。我希望它做的是：加载svg＆gt;申请第一个＆＃39; G＆＃39;带面具＆gt;点击动画儿童G＆＃39; G＆＃39;向上＆gt;清楚＆gt;选择一个特定的＆＃39; G＆＃39; （这次是第一次）＆gt;将其从底部动画到中心

出于某种原因而不是抓住第一个＆＃39; G＆＃39;它遍历SVG中的G＆＃39;我使用Select with Id＆＃尝试了这个，但它给了我同样的麻烦。

Sooo我做错了什么？

HTML

<svg id="svg"></svg>

JS

var s = Snap("#svg");
s.attr({ viewBox: "0 0 300 300" });
var bigCircle = s.circle(150, 150, 100);
var bigCircle2 = s.circle(150, 150, 100);

bigCircle2.attr({       
    fill:"none",
    stroke: "#0000e6",
    strokeWidth: 6
});


bigCircle.attr({
    fill: "#fff",
    stroke: "#fff",
    strokeWidth: 6
});    

Snap.load("images/numbers.svg", function (f) {

var apply = function(number){
    g = f.select("svg g:nth-child("+number+")");
    s.append(g);
    g.attr({
        mask: bigCircle,
    });   
    p = g.select("g");      
};   

apply(1); //Please give me the first g in the svg

var g_animate = function(){ 
    p.animate({ transform: 't0,-200' }, 500, mina.easeout, function(){
        p.remove();         
        apply(1); //Let's repeat the first g in the svg             
        p.attr({transform: 't0,200'});  
        p.animate({ transform: 't0,0' }, 500, mina.easein)
        })
    };

$("#svg").click(function(){   
    g_animate();
});
});

已加载svg

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
    <g>
    <path d="M162.367,212.803v-34.396h-58.358v-11.016l56.04-80.193h18.357v78.068h17.584v13.141h-17.584v34.396H162.367z
         M162.367,165.266v-41.932c0-6.57,0.193-13.14,0.58-19.71h-0.58c-3.865,7.343-6.957,12.753-10.436,18.551l-30.724,42.705v0.387
        H162.367z"/>
    <rect fill="none" width="300" height="300"/>
    </g>
</g>
<g>
    <g>
    <path d="M115.411,193.479c4.83,2.898,15.846,7.73,27.826,7.73c21.642,0,28.599-13.721,28.406-24.35
        c-0.193-17.584-16.039-25.119-32.464-25.119h-9.469v-12.754h9.469c12.367,0,28.019-6.377,28.019-21.256
        c0-10.049-6.377-18.938-22.029-18.938c-10.048,0-19.71,4.444-25.12,8.309l-4.638-12.367c6.764-4.83,19.517-9.662,33.043-9.662
        c24.734,0,35.943,14.687,35.943,29.952c0,13.141-7.924,24.155-23.189,29.759v0.387c15.459,2.898,27.826,14.493,28.02,32.077
        c0,20.098-15.846,37.682-45.796,37.682c-14.106,0-26.474-4.443-32.657-8.502L115.411,193.479z"/>
    <rect fill="none" width="300" height="300"/>
    </g>
</g>
<g>
    <g>
    <path d="M109.903,213.865v-10.435l13.334-12.947c32.077-30.531,46.764-46.764,46.764-65.7c0-12.754-5.991-24.542-24.735-24.542
        c-11.4,0-20.869,5.798-26.666,10.628l-5.411-11.98c8.503-7.149,21.062-12.754,35.362-12.754c27.054,0,38.454,18.551,38.454,36.522
        c0,23.188-16.812,41.933-43.285,67.439l-9.854,9.275v0.387h56.231v14.106H109.903z"/>
    <rect fill="none" width="300" height="300"/>
    </g>
</g>

<g>
    <g>
    <path d="M154.541,103.043h-0.387l-21.835,11.787l-3.285-12.946l27.439-14.687h14.494v125.605h-16.426V103.043z"/>
    <rect fill="none" width="300" height="300"/>
    </g>
</g>
</svg>

Answer 1

它不会继续重复相同的g元素，因为你用DOM将它从DOM中删除......

p.remove();

所以下次选择时，第二个初始g现在将是第一个。

编辑：

还值得关注＆＃39;追加＆＃39;会发生什么。如果将片段中的元素（从文件加载的数据）附加到DOM中，则该元素不再位于片段f中。因此，如果您现在选择一个新元素，它将是下一个g元素（因为另一个元素已被删除并添加到DOM中）。因此，如果你想要SAME元素，你想在s而不是f。

上使用css选择器

我很想在svg上最初使用selectAll将所有g元素放入数组并使用它们来引用它们，它可能会更直观。

用Snap.svg反复从加载的SVG中选择组

1 个答案: