3

I'm trying to use JavaScript (velocity.js) to animate an SVG that I've defined using <defs> and then instantiated with <use> and I'm having trouble accessing the DOM element of the SVG component I'm trying to modify. My code works with normal inline SVG just fine, but when I switch to the <defs>/<use> method it breaks.

When I use the inline SVG I can console.log the element in question and it returns information, but trying to access that same element generated with <use> returns an empty object. Is there anything in particular I need to be doing when trying to access the DOM elements of SVG generated with <use>?

The HTML

<div class="screen">
       <svg>
         <use href="/media/defs.svg#poppyIdle"></use>
       </svg>
</div>

and top of defs.svg (generated by inkscape, all I did was add <defs> and <symbol>) (don't want to post the whole thing)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
  <defs>
  <symbol id="poppyIdle" viewBox="0 0 140 250">
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
<g
     inkscape:groupmode="layer"
     id="layer12"
     inkscape:label="eyelids"
     style="display:inline"
     transform="translate(-6.125676,0.02323548)">
    <rect
       style="fill:#4d4d4d;fill-opacity:1;stroke-width:0.0694716"
       id="rect942-3"
       width="28.423023"
       height="2.0695279"
       x="34.666679"
       y="34.632057" />
    <rect
       style="display:inline;fill:#4d4d4d;fill-opacity:1;stroke-width:0.0694716"
       id="rect942-3-6"
       width="28.423023"
       height="2.0695279"
       x="85.931053"
       y="34.629658" />
  </g>
  </symbol>
  </defs>
</svg>
Captain Ahab
  • 33
  • 4
  • 1
    you may not want to post the whole thing, but at the very least post a heavily reduced but _complete_ SVG file. Better yet: show your problem using a [mcve] (either in code blocks, or as runnable snippet). – Mike 'Pomax' Kamermans Jan 01 '21 at 00:13
  • @Mike'Pomax'Kamermans ah thanks for the heads up on that, this is my first question. I added the SVG element I'm trying to animate to the post – Captain Ahab Jan 01 '21 at 00:20
  • Where's the code? There's just the SVG markup here. – Robert Longson Jan 01 '21 at 08:25
  • By including the external SVG using `` works for this. See [this question](https://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript). – Matthias Braun Aug 04 '23 at 00:31

1 Answers1

2

SVG use elements are like shadow DOM elements in HTML. Only the attributes of the USE element itself is exposed via the SVG DOM - you cannot alter any properties on a single USE element instance that are being cloned from the original symbol. It's not like a macro.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105