Обертывание элемента SVG с помощью CSS - PullRequest
Новая
       25

Обертывание элемента SVG с помощью CSS

0 голосов
/ 13 октября 2018

Я хочу сделать обертку элемента svg для ее динамического изменения размера.Я использую svg внутри div элемента, к которому применяется класс оболочки svg-wrapper.Мой CSS выглядит следующим образом: 

.svg-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: top;
  overflow: hidden;
  background-color: gray;
}

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  fill: red;
}

И HTML так: 

<div class="svg-wrapper">
  <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 300 100">
    <rect width="100%" height="100%" fill="blue"/>
  </svg>
</div>

Пример на JSFiddle: http://jsfiddle.net/a2nj971t/

Однако, как вы можете видеть, естьпроблема в том, что div не переносит svg снизу.Можно ли это исправить (независимо от размера svg)?

...