Tengo dificultades para acceder a una ID que está dentro de un archivo SVG y dentro de una etiqueta rect , para manipular los SVG, estoy usando la biblioteca Snap.svg. En este caso, quiero obtener el id="rect252" en el archivo javacript y cambiar la visibilidad de este objeto. Por alguna razón, no puedo obtener esta identificación.
Mi HTML:
<svg id="main"></svg> <button onclick="changeSvg('rect252')">Change</a>Mi JavaScript:
Para colocar una imagen con la biblioteca Snap
let m = Snap('#main').image("image.svg", 0, 0, 500, 500)Función
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' }) }) }Estructura SVG:
<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>Si alguien tiene alguna sugerencia se lo agradecería, gracias
No puede acceder a la identificación de una imagen svg.
Sin embargo, puede hacerlo si utiliza una etiqueta de objeto en su lugar.
<object id="main" data="image.svg" width="600" height="600" type="image/svg+xml"></object>Luego puede usar contentDocument para acceder a él. Ejemplo.
var tux = Snap("#main"); var tuxContent = tux.node.contentDocument; /// grab the referenced content