How can I get an ID from SVG file using javascript

I’m having difficulties in accessing an ID that is inside an SVG file and inside of a rect tag, to manipulate the SVG’s I’m using the Snap.svg library. In this case I want to get the get the id="rect252" in javacript file and change the visibility of this object. For some reason I’m not able to get this ID.

My HTML:

<svg id="main"></svg>
<button onclick="changeSvg('rect252')">Change</a>

My Javascript:

To place an image with Snap library

let m = Snap('#main').image("image.svg", 0, 0, 500, 500)

Function

function changeSvg(id){
    let svgTag = document.getElementById('main')
    svgTag.addEventListener("load", function(){
        let svgDoc = svgTag.contentDocument;
        let getID = svgDoc.getElementById(id);
        
        Snap('#' + getID).attr({
            visibility: 'visible'
        })
    })
}

SVG Structure:

 <g
     id="g327"
     inkscape:label="Top Center"
     transform="translate(-3.3026586,-12.907715)"
     style="display:block">
    <rect
       style="display:inline;fill:#000000"
       id="rect252"
       width="51.396542"
       height="31.275505"
       x="120.8588"
       y="92.630028"
       inkscape:label="Right"
       visibility="hidden" />
  </g>

If anyone has any suggestions I would appreciate it, thanks

Answer

You can’t access the id for an svg image.

However, you can if you use an object tag instead.

<object id="main" data="image.svg" width="600" height="600" type="image/svg+xml"></object>

Then you can use contentDocument to access it. Example.

var tux = Snap("#main");
var tuxContent = tux.node.contentDocument;   /// grab the referenced content

Advertisement

Answer