如何根据子SVG内容动态适配父div的高度

解决方案 #

高度无法自适应的核心原因是动态生成的SVG没有显式设置和内容匹配的height属性，浏览器无法识别SVG的实际高度，导致父容器无法撑开，按以下步骤修改即可：

1. 调整colorLegend函数，动态设置SVG高度

修改后的代码如下：

React.useEffect(() => {
    // 调用图例函数，传入容器id
    colorLegend("#legend");
}, [dep]);

function colorLegend(legend: string) {
    // 先清空已有SVG，避免重复渲染叠加
    select(legend).selectAll("svg").remove();
    const svg = select(legend)
       .append("svg")
       .attr("overflow","visible")
       .attr("width", "150px")
    // 执行图例渲染逻辑
    svg.call(colorLegend);
    // 获取SVG渲染后的实际内容高度
    const contentHeight = svg.node()?.getBBox().height || 0;
    // 给SVG设置匹配内容的高度，让父容器可以识别计算
    svg.attr("height", `${contentHeight}px`);
}

return (
    <div style={{position: "absolute",right: 16,top: 10,backgroundColor: "black",borderRadius: "5px",padding: "10px"}}>
        <label style={{ color: "#6F6F6F" }}>
          {name}
        </label>
        <div id="legend"></div>
    </div> 
);

2. 注意事项

• 不要给外层父div、#legend容器、SVG设置固定高度，保留默认的高度适配逻辑即可
• 如果图例有额外的内边距/外边距，可以在计算contentHeight的时候对应加上偏移值，避免内容裁切

内容的提问来源于stack exchange，提问作者Eric