SVG 内容被裁剪为动态值

Question

我有一个离散数据的颜色图例，它是使用 SVG 完成的。但是我在显示整个内容时遇到了问题，因为它正在被裁剪。我无法定义固定高度，因为内容是动态的。

仅供参考：我的代码是用 React 编写的

注意：我可以提供 overflow: visible 并使内容可见，但问题又出现在提供背景颜色上（背景颜色不适用于溢出的内容）。

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

function colorLegend(legend: string) {
  // logic
  select(legend)
  .append("svg")
  .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

很难用反应代码中的一个小例子来回答这个问题。但是，根据您提交的 fiddle，您可以设置固定高度，但要根据您拥有的图例数量。类似于：

height: calc(22px * 7 + (4px * 6));

解释数字： 22px * 7 是因为每个正方形的高度都是 22px。 4px * 6 是占底边距。最后一个不需要底边距。

https://jsfiddle.net/gzebj1qn/

所以，最终的代码应该是这样的：

height: calc(22px * ${legends.length} + (4px * ${legends.length -1}));

SVG 内容被裁剪为动态值

SVG content get cropped for dynamic values

css

height

svg

viewbox