SVG не уважает размер фона 100% 100% - PullRequest
Новая
       30

SVG не уважает размер фона 100% 100%

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

У меня есть это изображение SVG , которое я хотел бы покрыть полностью контейнером, сохраняя его отличительные края.background-size: 100% 100%; кажется идеальным выбором, и хотя он работает для обычных изображений, в этом случае он не работает.Почему?

(jpeg взято с Джеймс 'ответ) 

html, body {
  background-color: #ddd;
}
.container {
  margin: 20px; padding: 20px; border: 1px solid #000;

  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.container.svg {
  background-image: url(https://www.mnkylab.com/tmp/bg.svg);
}
.container.img {
  background-image: url(https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?auto=compress&cs=tinysrgb&h=350);
}
<div class="container svg">
  some<br>content<br>makes<br>this<br>large
</div>
<div class="container img">
  some<br>content<br>makes<br>this<br>large
</div>

Ответы [ 2 ]

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

Хорошо, я только что понял это после прочтения нескольких других тем, включая те, в которых он работал.

виновник был viewBox в рамках определения <svg>. Когда я его убрал, изображение масштабируется как надо. А для сафари мне нужно было добавить preserveAspectRatio="none".

До: 

<svg width="392px" height="499px" viewBox="0 0 392 499" ...

После того, как: 

<svg width="392px" height="499px" preserveAspectRatio="none" ...


html, body {
  background-color: #ddd;
}
.container {
  margin: 20px; padding: 20px; border: 1px solid #000;

  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.container.svg {
  background-image: url(https://www.mnkylab.com/tmp/bg.svg);
}
.container.img {
  background-image: url(https://www.mnkylab.com/tmp/bg_noviewbox.svg);
}
<div class="container svg">
  some<br>content<br>makes<br>this<br>large
</div>
<div class="container img">
  some<br>content<br>makes<br>this<br>large
</div>
0 голосов
/ 08 мая 2018

background-size: 100% 100%; должен сделать трюк. Пожалуйста, проверьте, нет ли ошибок в коде.

Вот скрипка: https://jsfiddle.net/7pn3cvh3/

...