CSS 背景颜色不适用于溢出的 SVG 内容

Question

问题：无法为整个内容提供背景颜色，我认为这是因为我提供了 CSS 样式（“溢出”、“可见”）或者可能是因为父级上的（位置：绝对）。我希望整个内容将背景颜色设为灰色或黑色。我还分享了小提琴链接（实际代码是用 react 编写的）。

https://jsfiddle.net/m1r0428k/1/

React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);

function colorLegend(legend: string) {
// logic
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> 
);

Answer 1

我不是 svg 方面的专家，但这就是我的目标。

将 viewBox 属性设置为 svg：<svg viewBox="0 0 200 390">。

此链接How to Scale SVG 可能会对您有所帮助。