SVG 内容被裁剪为动态值答案

【问题标题】：SVG content get cropped for dynamic valuesSVG 内容被裁剪为动态值
【发布时间】：2021-11-30 04:51:32
【问题描述】：

我有一个离散数据的颜色图例，它是使用 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> 
);

【问题讨论】：

您的 SVG 缺少 viewBox 属性，例如 viewBox="0 0 80 175" 其中 175 = 7 * 25 因为您的图例有 7 个项目
@enxaneta 我有图例的垂直和水平布局，垂直我使用了“变换”、“旋转（90度）”。如何计算垂直布局的高度和宽度？
恐怕我听不懂你。请在一个新问题中提出所有这些问题，不要忘记添加具有所需结果的图像
我同意你的看法。我为我的图例垂直布局应用了 rapheal 解决方案 (height: calc(22px * ${legends.length} + (4px * ${legends.length -1}));) 并且它有效。但是给出水平布局的问题（我将它旋转到 90 度）。我也需要适当的宽度和高度来进行水平布局。例如：jsfiddle.net/518enwam/3

标签： css svg height viewbox

【解决方案1】：

仅用 react 代码中的一个小例子来回答这个问题是很困难的。但是，根据您提交的小提琴，您可以设置一个固定的高度，但基于您拥有的图例数量。比如：

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

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

https://jsfiddle.net/gzebj1qn/

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

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

【讨论】：

我无法设置固定高度，因为图例可以变化，不一定是 7。也可以是 10 或 3。我曾使用溢出可见并显示图例，但背景颜色未应用于溢出内容（最后一个图例）
这就是为什么我将代码放在下面使用变量的原因。 :)
再一次，我没有完整的反应代码。但是您的图例来自数组或对象。无论哪种方式，您都拥有创建高度所需的一切。
谢谢，您的解决方案适用于水平布局。但是我有图例的垂直和水平布局，对于垂直我使用了“变换”，“旋转（90度）”。垂直布局的高度和宽度是多少？同样将宽度设为 100% 所需的宽度也超出了要求。
为了更清楚，您的建议适用于图例的垂直布局。但是给出水平布局的问题（我将它旋转到 90 度）。我也需要适当的宽度和高度来进行水平布局。例如：jsfiddle.net/518enwam/3