如何在 SVG 中拉伸所有矩形，使其占据所有宽度

Question

我有这个 SVG：

<svg width="100%" height="40" viewBox="0 0 371 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="57"  y="1" width="45" height="15" fill="#e1d6f2"/>
    <rect x="103" y="1" width="45" height="15" fill="#c1b0e2"/>
    <rect x="149" y="1" width="45" height="15" fill="#9b80ce"/>
    <rect x="195" y="1" width="45" height="15" fill="#6d4cbf"/>
    <rect x="241" y="1" width="45" height="15" fill="#4d2c7a"/>
    <text x="57" y="38" text-anchor="middle" fill="#000">0</text>
    <text x="102" y="38" text-anchor="middle" fill="#000">20</text>
    <text x="147" y="38" text-anchor="middle" fill="#000">40</text>
    <text x="192" y="38" text-anchor="middle" fill="#000">60</text>
    <text x="237" y="38" text-anchor="middle" fill="#000">80</text>
    <text x="290" y="38" text-anchor="middle" fill="#000">100%</text>
</svg>

目前 SVG 采用父容器的宽度，但矩形保持相同大小。我希望它们通过调整窗口大小来获取所有宽度和比例。我如何做到这一点？

Answer 1

关键是将宽度和x 值添加为百分比。

一个例子如下：

<svg width="100%" height="40" xmlns="http://www.w3.org/2000/svg">
  <rect width="25%" height="15" fill="#e1d6f2" />
  <rect width="25%" height="15" fill="#c1b0e2" x="20%" />
  <rect width="25%" height="15" fill="#9b80ce" x="40%"/>
  <rect width="25%" height="15" fill="#6d4cbf" x="60%"/>
  <rect width="25%" height="15" fill="#4d2c7a" x="80%"/>
  <text x="3%" y="38" text-anchor="middle" fill="#000">0</text>
  <text x="20%" y="38" text-anchor="middle" fill="#000">20</text>
  <text x="40%" y="38" text-anchor="middle" fill="#000">40</text>
  <text x="60%" y="38" text-anchor="middle" fill="#000">60</text>
  <text x="80%" y="38" text-anchor="middle" fill="#000">80</text>
  <text x="96%" y="38" text-anchor="middle" fill="#000">100%</text>
</svg>