如何拉伸 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 采用父容器的宽度，但矩形保持相同的大小。我希望它们采用 window 调整大小来获取所有宽度和比例。我该如何实现？

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>

如何拉伸 SVG 中的所有矩形，使它们占据所有宽度

How to stretch all rectangles in SVG so they take all width

html

css

svg

rectangles