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

Question

我想问一下 select <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

我前几天也有过类似的事情....其实a的内容是shadow dom，或者说是a link到元素的内容吧指的是。使用本身被视为组元素。

回答你的问题：我不知道snap.svg怎么办，你只需要取use的href属性的值，里面就是原来的id元素，您可以获得并访问其内容。

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

编辑

嗯，这可能有帮助： instanceRoot 属性...

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

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

Get content of <use> svg using Snap.vg

svg