使用重复的嵌套SVG元素

在使用snap.svg时，我遇到了以下问题

我希望在主SVG中使用嵌套的SVG元素。假设其中一个嵌套结构的结构如下：

<svg width="71" height="101" viewBox="0 0 71 101">
<defs>
    <rect id="a" width="70" height="100" rx="5"/>
    <mask id="d" width="70" height="100" x="0" y="0" fill="#fff">
    <use xlink:href="#a"/>
    </mask>
    <rect id="b" width="70" height="100" rx="5"/>
    <mask id="e" width="70" height="100" x="0" y="0" fill="#fff">
    <use xlink:href="#b"/>
    </mask>
    <pattern id="f" width="6" height="5" x="-6" y="-5" patternUnits="userSpaceOnUse">
    <use transform="scale(.5)" xlink:href="#tipstercard-c"/>
    </pattern>
    <image id="c" width="12" height="10" xlink:href="data:image/png;base64,..."/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(.338 .194)">
    <use fill="#212120" stroke="#FFF" stroke-width="4" mask="url(#tipstercard-d)" xlink:href="#a"/>
    <use fill="url(#f)" fill-opacity=".1" stroke="#FFF" stroke-width="4" mask="url(#e)" style="mix-blend-mode:luminosity" xlink:href="#b"/>
    <path fill="#FFF" d="M20.22 47.784v1.53h-1.344v2.923c0 .593.013.937.04 1.035a.42.42 0 0 0 .174.241c.091.064.2>...

---

现在的问题是为什么这不起作用；上面的代码是什么？为什么我不能使用片段['card']。直接选择'svg'？

片段没有Snap方法的概念，所以像clone这样的方法不起作用。首先，需要将它们附加到DOM中。另外，一个片段并不完全在DOM中，因此DOM svg元素可以使用的一些常见svg方法存在问题

所以类似于fragment.select'svg'。克隆不起作用，因为克隆是一种快照方法。首先，您需要“Snapify”将其转换为Snap元素，即围绕svg元素的包装器

因此，您需要执行以下操作..首先将其添加到DOM

Surface.append( fragment.select('svg') );

现在它在DOM中，您可以对它进行快照并克隆它，因为我们现在有了可用于此元素的快照方法

Surface.select('someId').clone();

注意，如果您在某处有一个DOM元素，也可以通过执行以下操作将其转换为一个Snap元素

var snapElement = Snap( someDomElement );

这将保持DOM元素的原样，但只是在其周围添加一个快照包装器，并将其作为快照元素返回

因此，您自己找到了正确的代码，主要的答案是您的元素在尝试调用其上的方法或附加到DOM时不是Snap元素

---

注意：您可以在不将片段添加到DOM的情况下对其进行快照，但除非它位于主DOM中，否则它不会为您带来任何新方法，但对于存储对稍后将附加的元素的引用可能很方便。

什么是片段['card']？没有这些代码，这很棘手。假设它实际上是一个片段，它不会有任何像克隆这样的方法，基本上它有select/selectAll/setAttribute等，没有Snap方法。@Ian fragments['card']是一个片段。尝试调用时。选择“svg”。克隆；我收到上面提到的打字错误。如果需要，我还可以共享实际的SVG？

var snapElement = Snap( someDomElement );