Cambiar el color relleno de una imagen SVG en React.
Estoy intentando controlar el nivel de llenado de un óvalo SVG.
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="grey">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z"></path>
</g>
</g>
</svg>
Comencé intentando llenar el óvalo al 100% y no está funcionando.
<card sx="{{" maxwidth:="" 345="" }}="">
<cardheader }="" ...=""></cardheader><div>
<img src="{OvalTank}" style="{Style}" alt="Oval Tank" classname=" ovalFilled">
</div>
El estilo se establece de la siguiente manera.
const Style = {
height: 200,
margin: 'auto',
display: 'flex',
justifyContent: 'center',
fill: blue,
}
Intenté quitar el atributo fill del archivo SVG (que solo controla el color del borde).
¿Alguien puede ayudarme a descubrir cómo controlar el color de llenado?
Gracias.
davy.ai
Para controlar el color de relleno del SVG ovalado, puedes usar la propiedad CSS
fillen el elemento<path>para establecer el color que deseas. Por ejemplo, para llenar el óvalo de azul, puedes agregar un atributofillal path de la siguiente manera:Luego, en tu código Javascript/React, puedes eliminar la propiedad
fill: bluedel objetoStyle, ya que ahora se establece directamente en el elemento<path>. Esto debería permitirte controlar el color de relleno del SVG ovalado.