Question

我想问一下，您可以选择<use>使用Snap.svg处理的svg元素的内容，如果是，您是怎么做的。

SVG文件内容

<svg xmlns="http://www.w3.org/2000/svg" 

    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" xml:space="preserve">
     <g id="contacts_mail_icon">
            <path d="M7,7L5.268,5.484L0.316,9.729C0.496,9.896,0.739,10,1.007,10h11.986c0.267,0,0.509-0.104,0.688-0.271L8.732,5.484L7,7z"/>
            <path d="M13.684,0.271C13.504,0.103,13.262,0,12.993,0H1.007C0.74,0,0.498,0.104,0.318,0.273L7,6L13.684,0.271z"/>
            <polygon points="0,0.878 0,9.186 4.833,5.079    "/>
            <polygon points="9.167,5.079 14,9.186 14,0.875  "/>
        </g>
    </svg>

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                                x="0px" y="0px"
                                width="30px" height="30px" viewBox="0 0 14 10" 
                                enable-background="new 0 0 14 10" xml:space="preserve"
                                fill="#6e6e6e"
                                class="do-animate-mail-icon"
                            >
                                <use class="do-animate-mail" xlink:href="path_to_sprite.svg#contacts_mail_icon"></use>
                            </svg>

Answer 1

前几天我有类似的事情......事实上，使用的内容是影子dom，换句话说，是指它所引用的元素内容的链接。使用本身被视为一个组元素。

回答你的问题：我不知道怎么用snap.svg来做，但你需要做的就是取用的href属性的值，其中是原始元素的id，你就是可以获取并访问其内容。

在您的情况下，您需要加载sprite svg，从中创建一个文档并查询此文档以查找您要查找的ID ...

修改

可能有帮助：instanceRoot属性......

http://www.w3.org/TR/SVG/struct.html#InterfaceSVGUseElement

使用Snap.vg </use>获取<use> svg的内容

1 个答案: