4

Как делать SVG структуру резиновой ?К примеру на такое конструкции

* {
  margin: 0;
}
svg {
  display: table;
  margin: auto;
}
<svg style="width:1200px; height:300px;">
  <polygon points="10 10,10 140,600 290,1190 140,1190 10  " style="fill: blue; fill-opacity:0.5; stroke:blue;" />

</svg>

Примерно что бы эта фигура тянулась..

Вырезать из фотошопа или сохранять как изображение не вариант

2 ответа 2

4

Для этого достаточно обозначить координаты и размер холста за счет атрибута viewBox - и можно делать svg резиновым, за счет уже знакомого width: 100%.

* {
  margin: 0;
}

.svg-responsive {
  width: 100%;
}
<svg class="svg-responsive" viewBox="0 0 1200 300">
  <polygon points="10 10, 10 140, 600 290, 1190 140, 1190 10" style="fill: blue; fill-opacity: 0.5; stroke: blue;"/>
</svg>

1
  • блеск , я такого раньше не видел ! спс
    – user33274
    17 сен 2016 в 11:02
2

Например задать:

svg {
  max-width: 100%;
  width: 100%;
}

* {
  margin: 0;
}
svg {
  display: table;
  margin: auto;
  max-width: 100%;
  width: 100%;
}
<svg style="height:300px;">
  <polygon points="10 10,10 140,600 290,1190 140,1190 10  " style="fill: blue; fill-opacity:0.5; stroke:blue;" />

</svg>

3
  • Леночка я так делал милион раз , а координаты точек же статичные - сам svg делал я 100% но экран при с ужении выдаёт скролл но как раз из за точек , так же пробовал писать точки в % - svg просто не работает
    – user33274
    16 сен 2016 в 22:42
  • Т.е. нужно, чтобы и по высоте масштабировалось пропорционально, потому что при сужении у меня горизонтального скролла нет (по крайней мере для данного примера)?! И именно точки в стиле points = 10%,10% ... задать не возможно.
    – SVE
    17 сен 2016 в 5:14
  • вот кстати Леночка смотрите когда открываешь сниппет - уже svg не влазиет в него, смотрите пример который я отметил решением - для меня это открытие
    – user33274
    17 сен 2016 в 12:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.