Estoy intentando controlar el nivel de llenado de un SVG ovalado.
<?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 "/> </g>Empecé a tratar de llenar el óvalo al 100% y no funciona.
<Card sx={{ maxWidth: 345 }}> <CardHeader } ... <div> <img src={OvalTank} style={Style} alt="Oval Tank" className=" ovalFilled" /> </div> Style being set this way const Style = { height: 200, margin: 'auto', display: 'flex', justifyContent: 'center', fill: blue, }Intento eliminar el atributo de relleno del archivo svg (que solo controla el color del borde).
¿Alguien puede ayudar a descubrir cómo controlar el color relleno?
Gracias
Con algunos ajustes en su marcado svg, puede colocar sus activos svg junto a un elemento <use> .
Su elemento svg necesitará una identificación para hacer referencia.
Recomiendo envolver su gráfico en un elemento <symbol> así:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <symbol id="path"> <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" /> </symbol> </svg>Ahora puede colocar una instancia de su imagen mediante una referencia:
<svg viewBox="0 0 512 512" style="fill:red"> <use href="ovalTank.svg#path" /> </svg> Dado que eliminamos todos los atributos de relleno, podemos diseñar/anular colores para cada instancia de símbolo.
El principal beneficio de este enfoque de símbolo/uso es la idea de almacenar múltiples activos gráficos en un solo archivo svg. Sin embargo, cargar símbolos desde un archivo externo necesitará que este archivo esté en el mismo dominio.
Aquí hay un ejemplo de svg en línea:
svg { display: inline-block; width: 5em; } <!-- svg file content --> <svg style="display:none;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"> <symbol id="path"> <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" /> </symbol> <symbol id="icon-calendar" viewBox="0 0 448 512"> <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z" /> </symbol> </svg> <!-- usage --> <svg viewBox="0 0 512 512" style="fill:red"> <use href="#path" /> </svg> <svg viewBox="0 0 448 512" style="fill:green"> <use href="#icon-calendar" /> </svg>