1

I have an <svg> element which contains some <image> elements under <defs> tag, which are referenced by some <use> elements, like this:

    <svg xmlns="http://www.w3.org/2000/svg" ...>
      <defs>
        <image height="100%" id="test" width="100%" xlink:href="data:image/png;base64,..."/>
      </defs>
      <g transform="translate(111,222)">
        <svg height="100" width="200" x="0" y="0">
          <use xlink:href="#test"/>
        </svg>
      </g>
    </svg>

I have a javascript function which iterates through the svg element, and at a certain point I get the image which is referenced by <use>. What I want to do is to get the height/width of the <svg> above <use> from the <image> element.

If a try:

image.parentElement

I get the <defs> element, not the <use> element.

How can I find the element which referenced the image? I can try to search the element which contains xlink:href="#test" , but is there a direct way to get this from the referenced <image> ?

Sorry for the noob question, but I'm new to javascript/html.

jajacq
  • 11
  • 3
  • Please take a look at this answer: [Getting 'xlink:href' attribute of the SVG element dynamically using JS in HTML DOM](https://stackoverflow.com/questions/12422668/getting-xlinkhref-attribute-of-the-svg-image-element-dynamically-using-js-i/12423019#12423019) – enxaneta Jun 07 '19 at 11:21

1 Answers1

0

No. There is not a way to get the <use> element directly from the <image> element.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181