Javascript 使用Snap.SVG从加载的SVG中重复选择组

我对SVG的整个业务有点陌生，现在我遇到了一个我真的不理解的问题

我现在正在制作图标的动画，并注意到重复选择g并应用它们对我来说不起作用。为了回答这个问题，我举了个例子。我想让它做的是：加载svg>使用掩码应用第一个“G”>单击向上设置子“G”的动画>清除>再次选择一个特定的“G”>第一个>从底部到中心设置动画

出于某种原因，它没有捕获第一个“G”，而是在SVG中的“G”上迭代。我尝试过使用带有Id的Select，但它也给了我同样的麻烦

我做错了什么

html

加载的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>

---

它不会一直重复相同的g元素，因为您使用以下命令将其从DOM中删除

p.remove();

所以下次它选择的时候，它的第二个首字母g将是第一个

编辑：

还值得一看“append”会发生什么。如果将从文件加载的数据片段中的元素附加到DOM中，则该元素不再位于片段f中。因此，如果您现在选择一个新元素，它将是下一个g元素，因为另一个元素已被删除并添加到DOM中。因此，如果您想要相同的元素，那么您需要在s而不是f上使用css选择器

---

我很想最初在svg上使用selectAll将所有g元素放入一个数组中，并使用这些元素引用它们，这可能会让我感觉更直观。

啊，哇，谢谢伊恩！那么，我如何才能在不完全删除的情况下从“画布”中清除元素呢？哦，实际上是删除p.remove；这并不能解决问题。对我来说，它仍然不适用预期的“g”。应用元素后，元素是否从加载的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>

p.remove();