Tengo un archivo SVG externo que contiene la siguiente definición SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150" ><path class="st0" fill="#FFFFFF" d="M50,145.5C40.6,131.6,2.5,73.4,2.5,50C2.5,23.8,23.8,2.5,50,2.5S97.5,23.8,97.5,50C97.5,73.4,59.4,131.6,50,145.5z"/><path class="st1" fill="#000000" d="m50 5c24.8 0 45 20.2 45 45 0 19.5-29.4 67.7-45 91.1-15.6-23.4-45-71.6-45-91.1 0-24.8 20.2-45 45-45m0-5c-27.6 0-50 22.4-50 50s50 100 50 100 50-72.4 50-100-22.4-50-50-50z"/><circle fill="#ffbf00" cx="50" cy="50" r="27.5"/><path d="m50 25c13.8 0 25 11.2 25 25s-11.2 25-25 25-25-11.2-25-25 11.2-25 25-25m0-5c-16.6 0-30 13.4-30 30s13.4 30 30 30 30-13.4 30-30-13.4-30-30-30z"/></svg>
El SVG tiene múltiples rutas , por lo que para poder cambiar los colores de las rutas individuales, necesito poder cargar el contenido del archivo SVG en una variable de Javascript como esta:
var svgSource = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150" ><path class="st0" fill="#FFFFFF" d="M50,145.5C40.6,131.6,2.5,73.4,2.5,50C2.5,23.8,23.8,2.5,50,2.5S97.5,23.8,97.5,50C97.5,73.4,59.4,131.6,50,145.5z"/><path class="st1" fill="#000000" d="m50 5c24.8 0 45 20.2 45 45 0 19.5-29.4 67.7-45 91.1-15.6-23.4-45-71.6-45-91.1 0-24.8 20.2-45 45-45m0-5c-27.6 0-50 22.4-50 50s50 100 50 100 50-72.4 50-100-22.4-50-50-50z"/><circle fill="#ffbf00" cx="50" cy="50" r="27.5"/><path d="m50 25c13.8 0 25 11.2 25 25s-11.2 25-25 25-25-11.2-25-25 11.2-25 25-25m0-5c-16.6 0-30 13.4-30 30s13.4 30 30 30 30-13.4 30-30-13.4-30-30-30z"/></svg>';
Entonces puedo usar declaraciones condicionales para alterar los colores, por ejemplo.
switch(centerId) { case 1: svgSource = svgSource.replace("#ffbf00", "#005D00"); break; case 2: svgSource = svgSource.replace("#ffbf00", "#A20000"); break; case 3: svgSource = svgSource.replace("#ffbf00", "#ffbf00"); break; }Podría definir y usar el código SVG en línea codificado en Javascript como se muestra, pero para el mantenimiento y la continuidad sería mucho mejor usar archivos SVG externos, centralizados y existentes.
¿Cómo puedo cargar el contenido del archivo SVG en una variable/objeto de javascript?
Una solución es cargar la imagen svg configurando la propiedad innerHTML de un contenedor arbitrario en su cadena svg.
Esto le da dos opciones: en primer lugar, para cambios pesados, tiene acceso a cada ruta como parte del DOM y puede manipularlos usando javascript. Esto simplemente requiere hacer una referencia a container.children[0] ; Alternativamente, para cambios simples como cambios de color, hace que cada elemento se pueda orientar directamente mediante reglas de estilo donde puede especificar colores de la manera habitual.
El fragmento ilustra cómo agregar el svg al dom usando su cadena y restablece algunos colores con reglas de estilo simples. Hacer una referencia para los cambios usando javascript se muestra comentado al pie del código.
let svgSource = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150" ><path class="st0" fill="#FFFFFF" d="M50,145.5C40.6,131.6,2.5,73.4,2.5,50C2.5,23.8,23.8,2.5,50,2.5S97.5,23.8,97.5,50C97.5,73.4,59.4,131.6,50,145.5z"/><path class="st1" fill="#000000" d="m50 5c24.8 0 45 20.2 45 45 0 19.5-29.4 67.7-45 91.1-15.6-23.4-45-71.6-45-91.1 0-24.8 20.2-45 45-45m0-5c-27.6 0-50 22.4-50 50s50 100 50 100 50-72.4 50-100-22.4-50-50-50z"/><circle fill="#ffbf00" cx="50" cy="50" r="27.5"/><path d="m50 25c13.8 0 25 11.2 25 25s-11.2 25-25 25-25-11.2-25-25 11.2-25 25-25m0-5c-16.6 0-30 13.4-30 30s13.4 30 30 30 30-13.4 30-30-13.4-30-30-30z"/></svg>'; const container = document.getElementsByTagName('div')[0]; container.innerHTML = svgSource; // for js manipulation: // svgObject = container.children[0]; div { width: 50%; } .st0 { fill: red; } .st1 { fill: yellow; } circle { fill: green; } <div> </div>Estilo CSS
Intente usar CSS para diseñar las rutas en lugar de reemplazar partes del código fuente.
Ejemplo de código conceptual, usando el atributo de style de los elementos svg para aplicar algo de CSS:
"use strict"; const svg = document.querySelector("svg"); const paths = svg.querySelectorAll("path"); paths[0].style = "fill: #FF0000;" svg.querySelector("circle").style = "fill: rebeccapurple"; svg { height: 150px; width: 100px; } <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150" ><path class="st0" fill="#FFFFFF" d="M50,145.5C40.6,131.6,2.5,73.4,2.5,50C2.5,23.8,23.8,2.5,50,2.5S97.5,23.8,97.5,50C97.5,73.4,59.4,131.6,50,145.5z"/><path class="st1" fill="#000000" d="m50 5c24.8 0 45 20.2 45 45 0 19.5-29.4 67.7-45 91.1-15.6-23.4-45-71.6-45-91.1 0-24.8 20.2-45 45-45m0-5c-27.6 0-50 22.4-50 50s50 100 50 100 50-72.4 50-100-22.4-50-50-50z"/><circle fill="#ffbf00" cx="50" cy="50" r="27.5"/><path d="m50 25c13.8 0 25 11.2 25 25s-11.2 25-25 25-25-11.2-25-25 11.2-25 25-25m0-5c-16.6 0-30 13.4-30 30s13.4 30 30 30 30-13.4 30-30-13.4-30-30-30z"/></svg>Potencialmente, podría mejorar esto escribiendo una fuente svg que espera ser diseñada por CSS en lugar de ser anulada por valores de atributos de estilo.
Ver también: ¿Cómo usar SVG externo en HTML?
Obtener la fuente de un archivo SVG externo
Se puede incluir un archivo svg externo en HTML usando un par de etiquetas <object> . Por ejemplo, si "svg-file.svg" está en el mismo directorio que el archivo HTML:
<object type="image/svg+xml" id="mySVG" data="svg-file.svg" width="100" height="150" ></object> Sujeto a las políticas de seguridad: el archivo svg debe ser del mismo dominio y estar servido desde una red o un servidor localhost; debido a la restricción de seguridad general impuesta a los archivos locales, el origen de los archivos svg se carga mediante el protocolo file:// . no se puede acceder
Recoger la fuente svg es un poco oscuro. Esto funcionó para mí después de cargar la página, usando el HTML anterior:
window.onload = ()=> { console.log("loaded"); const svgObject = document.querySelector("#mySVG"); const svg = svgObject.getSVGDocument().documentElement; const svgSource = svg.outerHTML; console.log("svgElement, tag name '%s' ", svg.tagName, svg); console.log("svgSource: ", svgSource); console.log("path.st0: ", svg.querySelector('.st0')); };