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

Posted 2023-02-21

【中文标题】CSS 背景颜色不适用于溢出的 SVG 内容

【英文标题】：CSS background color not working for overflowed SVG content

【发布时间】：2022-01-06 09:56:21

【问题描述】：

问题：无法为整个内容提供背景颜色，我认为这是因为我提供了 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> 
);

【参考方案1】：

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

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

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

【讨论】：

我不想给出预定义的高度，因为内容是动态的，因此如果我给出高度：100%，内容会被裁剪，为此我给出了溢出：可见但背景又没有为溢出的内容工作。我尝试过：

我不认为 svg 可以那样工作...找到了类似问题的答案：***.com/a/11683540/4873616。它说：“如果要将元素添加到 svg 的底部，则必须相应地更改 viewBox 值（...）它将发生在具有最大 y 点的 viewBox 之外”