Как сделать SVG viewbox таким же широким, как его контейнер? - PullRequest
Новая
       48

Как сделать SVG viewbox таким же широким, как его контейнер?

0 голосов
/ 01 мая 2018

Я пытаюсь понять это, но у меня много проблем: 

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

Как сделать так, чтобы координаты окна просмотра растягивались на 100% по высоте и ширине, следуя координатам области просмотра элемента svg?

P.S. Упаковщик имеет ширину 100% и установленную высоту.

1 Ответ

0 голосов
/ 01 мая 2018

Просто удалите атрибуты 'height' и 'width' из вашего SVG-элемента. 

 <div class="wrapper">
    <svg viewbox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
 </div>

https://jsfiddle.net/mhcp4qpy/

SVG немного странные, потому что они масштабируются не так, как большинство элементов img. Большинство людей "задумались" об этом.

Если вы хотите, чтобы height также заполнял контейнер на 100% и никогда не переполнялся, вы можете изменить атрибут 'preserveAspectRatio' в SVG, чтобы он искажался за пределы исходного аспекта соотношение.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

...