Как растянуть все прямоугольники в SVG так, чтобы они занимали всю ширину - PullRequest
Новая
       82

Как растянуть все прямоугольники в SVG так, чтобы они занимали всю ширину

0 голосов
/ 18 июня 2020

У меня есть этот 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 принимает ширину родительского контейнера, но прямоугольники остаются того же размера. Я хочу, чтобы они занимали всю ширину и масштаб с изменением размера окна. Как мне этого добиться?

1 Ответ

1 голос
/ 18 июня 2020

Ключ состоит в том, чтобы сложить ширину и значения 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>
...