Estoy tratando de desarrollar un sitio web que consiste en un mapa geográfico usando svg, con datos derivados de OpenStreetMap. Dado que será grande y aceptará transformaciones (zoom y movimiento), solo una parte será visible en la pantalla. Entonces, por problemas de rendimiento, probablemente será necesario encontrar una manera de cargar partes de él de manera asíncrona. ¿Hay alguna forma de hacer esto? (por ejemplo, como CATiledLayer de iOS)
¿Cómo hacen esto los sitios web como Google Maps?
Tienes que usar el svg en línea y no como una referencia de imagen. De esta manera, podrá manipular las partes de la imagen como elementos DOM con javascript.
// adding a black circle after 1 sec setTimeout(() => { var svgNS = "http://www.w3.org/2000/svg" var myImage = document.createElementNS(svgNS,"image") myImage.setAttributeNS(null,"x",20) myImage.setAttributeNS(null,"y",20) myImage.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://picsum.photos/200/200") document.getElementById("mySVG").appendChild(myImage) }, 1000) <!-- existing svg image --> <svg id="mySVG"> <circle fill="red" cx="20" cy="20" r="20" /> </svg>En el ejemplo anterior, se agrega una imagen a un svg existente. Gracias por Alex Moanga y Daveman por los fragmentos js.