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
CodePudding user response:
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