Sé que esto ha sido respondido antes, pero ninguna solución funciona para mí. Quiero renderizar un archivo svg en una página html y acceder a sus elementos de código desde javascript. Quiero cambiar los atributos de elementos específicos. Específicamente, quiero cambiar y agregar un atributo style="fill:#FFFFFF;". Más tarde querré eliminar esto. Quiero acceder al elemento con la propiedad id del elemento. Intenté hacer esto con una gran cantidad de código javascript y renderizar el svg como un img y un objeto y nada funciona. es posible? ¿Si es así, cómo? Gracias por adelantado.
No hay forma de cambiar la propiedad de relleno de un SVG que desea mostrar en una etiqueta img. Sin embargo, puede cambiar la propiedad del filter .
Entonces, lo que quieres hacer es mostrar el archivo svg así:
<img class="svg-icon" src="./your.svg"/>
Debe darle a su etiqueta img un nombre de clase (además, no establezca la propiedad de relleno en línea).
Luego, simplemente puede aplicar un filter y el color del svg cambiará, así:
.your-icon { filter: invert(14%) sepia(95%) saturate(6069%) hue-rotate(360deg) brightness(108%) contrast(117%); }El filtro anterior es rojo. Utilice este convertidor de filtro hexadecimal para encontrar el color adecuado para usted: filtro hexadecimal .
Aquí hay una demostración de codesandbox .
Puede crear un componente de reacción para su SVG y controlar sus propiedades con accesorios en forma de reacción :
const SampleIcon = ({fill='red',backgroundColor='white', width='300', height='200'}) => ( <svg version="1.1" width={width} height={height} xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill={backgroundColor} /> <text x="150" y="125" font-size="60" text-anchor="middle" fill={fill}>SVG</text> </svg> )Ahora úsalo:
const App = () => ( <div> <SampleIcon fill='green' backgroundColor='#ff0'/> <SampleIcon with={400} height={300}/> </div> )