У меня есть фон SVG, который я хочу использовать, и я не могу понять, как сделать так, чтобы он растягивался на всю страницу, не говоря уже о том, чтобы быть фоном. Может ли кто-нибудь помочь?
(Страницы W3Schools, как на SVG, так и на фоне, ничего мне не дали).
<object data="background.svg" type="image/svg+xml" width="100%" height="100%"> точно не работает.
Я думаю, вы спрашиваете, можете ли вы заставить SVG искажаться и растягиваться, как это делает PNG. К сожалению, это не невозможно, если ваши коды SVG не настроены таким образом (скажем, если ваш SVG сгенерирован иллюстратором, они просто не будут этого делать).
Единственный способ сделать это на данный момент — вручную закодировать SVG. Например, вместо того, чтобы рисовать диагональную линию с заданным углом, вы можете указать SVG соединить верхний левый угол с нижним правым углом. Если у вас есть SVG, я мог бы рассказать вам, как его вручную закодировать. (Если ваш SVG такой сложный, как тигр Фрогза, скорее всего, это будет невозможно...)
Также для большинства современных браузеров вы можете просто добавить атрибут preserveAspectRatio="none" к тегу svg. Если у вас есть файлы .svg, вам нужно открыть файл с возвышенным текстом и добавить код в тег svg (что-то вроде <svg version="1.1"...(hundreds of lines of codes followed), и вы сделаете его <svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed).
Я только что понял это. В теге <svg> вам необходимо:
width и height например: width="375" height="137"preserveAspectRatio="none"viewBox="0 0 375 137"В вашем файле css для элемента, содержащего ваш фон svg:
background-size: 100% 100%;Ключевой проблемой для меня было то, что мой файл svg не содержал свойство viewbox.
preserveAspectRatio="none" и удалить ширину и высоту. 08.02.2021 Вам нужно свойство CSS3 background-size:
div {
height:200px;
background:url(my.svg);
background-size: 100% auto; /* Fill width, retain proportions */
}
Если вы хотите, чтобы он масштабировался непропорционально, чтобы заполнить контейнер (чтобы фон растягивался и сжимался), используйте background-size: 100% 100%.
preserveAspectRatio="none" к тегу <svg> в файле, установив его в качестве фонового изображения и установив размер фона на 100%, он растягивается. Как это не растягивается как PNG? 20.03.2018 Я обнаружил, что Illustrator добавлял xml:space="preserve" к моему SVG, что не позволяло фоновому изображению растягиваться, чтобы соответствовать пространству. Я вижу, что это устарело; однако Illustrator все еще добавляет его. Как только я изменил этот атрибут на xml:space="preserve" и добавил preserveAspectRatio="none", изображение масштабируется, как задумано.
