CODEWITHSUNDEEP
svg
0neTime
0neTime

Reputation: 15

Get content of <use> svg using Snap.vg

I would like to ask can you select the content of the svg element that's being addressed by <use> with Snap.svg, and if yes how do you do it.

SVG file content

<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>

Upvotes: 0

Views: 77

Answers (1)

philipp
philipp

Reputation: 16515

I had similar thing some days ago.... In fact, the content of a use is shadow dom, or in other words, a link to the content of the element it refers to. The use itself is treated as a group element.

To answer your question: I do not know how to do it with snap.svg, but all you need to do is take the value of the href attribute of the use, therein is the id of the original element, which you can get and access its content.

In your case, you need to load the sprite svg, create a document from it and query this document for the id you are looking for...

EDIT

Well probably that helps: The instanceRoot property...

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

Upvotes: 2

Related Questions