Tengo un svg cargado en mi sitio web y quiero incrustarlo en mi html para que pueda tener la estructura de svg y la ruta:
<svg> <path id="svgPath"/> </svg>Me las arreglé para hacerlo con la imagen
<svg width="1920" height"720"> <image id="imgId" xlink:href="srclink" width="1920" height="720" /> </svg> Y cuando consulto esa imagen, no tengo los mismos métodos que tengo para un elemento de path . Por ejemplo, no tengo el .getTotalLength()
const path = document.querySelector("#pathId"); path.getTotalLength(); // will work const img = document.querySelector("#imgId"); img.getTotallength(); // does not work También puedo insertarlo con Javascript, si hay una manera de hacerlo mientras lo cargo desde el srclink .
need poder acceder a la ruta ya que el resto de mi código depende de eso.
Si es un archivo *.svg externo, un componente web nativo <load-file> puede obtenerlo e inyectarlo en el DOM; ya sea en shadowDOM o reemplazando el elemento <load-file> , convirtiéndose así en parte del DOM al que puede acceder y diseñar con CSS.
customElements.define("load-file", class extends HTMLElement { // declare default connectedCallback as sync so await can be used async connectedCallback( // call connectedCallback with parameter to *replace* SVG (of <load-file> persists) src = this.getAttribute("src"), // attach a shadowRoot if none exists (prevents displaying error when moving Nodes) shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"}) ) { // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML shadowRoot.innerHTML = await (await fetch(src)).text() // append optional <tag [shadowRoot]> Elements from inside <load-svg> after parsed <svg> shadowRoot.append(...this.querySelectorAll("[shadowRoot]")) // if "replaceWith" attribute // then replace <load-svg> with loaded content <load-svg> // childNodes instead of children to include #textNodes also this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes) } })Explicación completa en Dev. Para publicar: 〈cargar archivo〉Componente web, agregar contenido externo al DOM