使 svg 颜色比例适合父级的大小 div

Question

我一直在使用 SVG 创建离散图例颜色选择器。我希望颜色选择器 div 具有固定宽度和内容（svg 单元格）应根据 div 的宽度进行调整。请注意，由于代码很长，我只是粘贴几行代码。

var cellWidth = 22;
var cellHeight = 22;

//这不是完整代码

const selectedLegend = select(divRef.current);
selectedLegend
.append("div")
.append("svg")
.style("margin-top", "13px")
.style("margin-left", "137px")
.style("margin-right", "35px")
.style("width", "100%")
.style("height", "25px")
.style("background", "red")

// 填充颜色的代码

g.selectAll("g.legendCells")
.append("rect")
.attr("height", cellHeight)
.attr("width", cellWidth)
.style("fill", function (d: Record<string, unknown>) {
return d["color"];

//单元格直线对齐

g.selectAll("g.legendCells")
.attr("transform", function(d: any, i: number) {
return "translate(" + (i * cellWidth) + ",0)" })

我想让图例占满宽度，它必须覆盖整个背景红色。

更准确地说，我想要如下所示的东西，矩形单元格必须适合恒定宽度。

Answer 1

如果您没有在 svg 上设置宽度并使用 viewBox 属性，则 SVG 将填充整个 space.

更新

图像应拉伸：宽度应始终为 100%，高度应固定（此处为 50 像素）。要使图像拉伸，请将 preserveAspectRatio 属性设置为“none”。

#container svg {
  display: block;
}

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 2"
  width="100%" height="50" preserveAspectRatio="none">
    <rect width="20" height="2" fill="#eee"/>
    <rect x="0" y="0" width="1" height="1" fill="#000"/>
    <rect x="1" y="0" width="1" height="1" fill="#111"/>
    <rect x="2" y="0" width="1" height="1" fill="#222"/>
    <rect x="3" y="0" width="1" height="1" fill="#333"/>
    <rect x="4" y="0" width="1" height="1" fill="#444"/>
    <rect x="5" y="0" width="1" height="1" fill="#555"/>
    <rect x="6" y="0" width="1" height="1" fill="#666"/>
    <rect x="7" y="0" width="1" height="1" fill="#777"/>
    <rect x="8" y="0" width="1" height="1" fill="#888"/>
    <rect x="9" y="0" width="1" height="1" fill="#999"/>
    <rect x="10" y="0" width="1" height="1" fill="#aaa"/>
  </svg>
</div>

使 svg 颜色比例适合父级的大小 div

Make svg color scale fit the size of the parent div

reactjs

svg

legend

更新