Как масштабировать мой .svg, чтобы заполнить весь видовой экран? - PullRequest
Новая
       1

Как масштабировать мой .svg, чтобы заполнить весь видовой экран?

0 голосов
/ 03 июня 2018

Моя цель - создать рамку для всей страницы с рамкой, определенной на изображении svg.Я думал, что мой css должен справиться с задачей, но граница не масштабируется до окна браузера.Как должен выглядеть мой файл .css?Должен ли я изменить svg viewbox?

Мой код: 

html {
  background: url(img/border.svg) no-repeat fixed;
  background-size: cover;
  background-size: 100% 100%;
}
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p>some text.</p>
  <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <path d="m0 0.1375h198.7v111.92h-198.7v-111.92m2.3812 1.8521v98.954c0 1.3229 1.0583 2.3812 2.6458 2.3812h191.29l0.26459-98.69c0-1.5875-1.0583-2.6458-2.9104-2.6458z" fill="#d9d9d9"/>
</svg>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 03 июня 2018

Вы должны изменить размеры окна просмотра, чтобы оно было очень маленьким, чтобы оно реагировало на экран.

сделать что-то вроде viewBox="0 0 1920 1080" и затем применить css

0 голосов
/ 03 июня 2018

Вы ошиблись в нескольких вещах:

  1. В вашем SVG отсутствует закрывающий тег </svg>.
  2. Ваши viewBox значения неверны.Они больше чем ваше фактическое содержание SVG.Это должно быть что-то вроде: viewBox="0 0 199 112"
  3. Чтобы SVG игнорировала свое соотношение сторон и растянулась на родительский контейнер, вам нужно добавить preserveAspectRatio="none". 

svg {
  /* Example dimensions to show that svg stretches correctly */
  width: 400px;
  height: 400px;
  background-color: linen;
  border: solid 1px blue;
}
<svg  viewBox="0 0 199 112" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="m0 0.1375h198.7v111.92h-198.7v-111.92m2.3812 1.8521v98.954c0 1.3229 1.0583 2.3812 2.6458 2.3812h191.29l0.26459-98.69c0-1.5875-1.0583-2.6458-2.9104-2.6458z" fill="#d9d9d9"/>
</svg>
0 голосов
/ 03 июня 2018

Ваш viewbox равен 300 x 300, измените его на 1920 x 1080 (ваш размер SVG), тогда это должно сделать это и сделать его отзывчивым.

проверьте этот код: 

body {
  margin: 0;
  padding: 0;
}
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p>some text.</p>
  <svg preserveAspectRatio="none" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#D9D9D9;}
</style>
<path class="st0" d="M0-0.7h1920v1081.5H0V-0.7 M23,17.2v956.2c0,12.8,10.2,23,25.6,23H1897l2.6-953.6c0-15.3-10.2-25.6-28.1-25.6
	L23,17.2z"/>
</svg>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...