El color de fondo de CSS no se está aplicando para el contenido SVG que desborda.
Problema: No es posible dar color de fondo al contenido completo y asumo que esto se debe al estilo CSS (“overflow”, “visible”) que he dado o tal vez debido a (position: absolute) en el padre. Quiero que todo el contenido tome el color de fondo como gris o negro. También he compartido el enlace de fiddle (el código real está escrito en React).
https://jsfiddle.net/m1r0428k/1/
React.useEffect(() => {
// llamando a la función legenda y pasando la identificación de la división a la función
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// lógica
select(legend)
.attr("height", 100 + "%")
.attr("width", 100 + "%")
.style("background-color", "black")
.style("border-radius", "5px")
.call(colorLegend);
}
return (
<div style={{position: "absolute",right: 16,top: 10,backgroundColor:
"grey"}}>
<div id="legend"></div>
</div>
);
davy.ai
El problema aquí es que el color de fondo no se está aplicando a todo el contenido y se presupone que es debido al estilo CSS “overflow” o la posición “absolute” en el elemento padre. Para solucionar esto, se puede intentar eliminar los estilos “overflow” y “position” y en su lugar usar los atributos “height” y “width” para establecer las dimensiones del elemento padre en un 100%. Luego, se puede aplicar el estilo de color de fondo al elemento padre y cualquier elemento secundario que lo requiera. En el código proporcionado, la función “colorLegend” está estableciendo el estilo de color de fondo en el elemento “legend”, pero no en el “div” padre. Para aplicar el color de fondo al “div” padre, se puede modificar la función “colorLegend” de la siguiente manera:
Además de establecer el color de fondo para el elemento “legend”, esta función modificada también establece el color de fondo para el elemento padre utilizando la propiedad “parentElement” del elemento “legend”. Alternativamente, también se podría modificar el elemento “div” padre directamente en el código JSX del componente principal de la siguiente manera:
Esto establece el estilo de color de fondo directamente en el elemento “div” padre, lo cual debería aplicar el color de fondo a todo el contenido.