Я застрял, пытаясь заполнить ширину страницы с SVG - PullRequest
Новая
       1

Я застрял, пытаясь заполнить ширину страницы с SVG

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

По общему признанию, я новичок в SVG, но я попробовал несколько различных вариантов кода ниже без удачи.Я просто хочу расширить форму SVG и изображение, чтобы заполнить ширину страницы.Я также хочу сократить высоту.Моя цель - сделать этот заголовок / баннер сайта (с размытым текстом и логотипом над ним).

Любая помощь будет принята с благодарностью.TIA! 

<html>

<style>

body{background-color: black;
}

div {
    width: 100%;
    height: auto;

}
svg {
    max-width: 100%;
    height: auto;
}

</style>
</head>

<body>

<div>
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
        <!--<image xlink:href="https://i.ebayimg.com/images/g/RnUAAOSwG1JakMvr/s-l1600.jpg" x="0" y="0" width="100%" height="680" />-->
        <image  xlink:href="https://images.furnituredealer.net/img/collections%2Fsignature_design_by_ashley%2Fdarcy%207500_75000-lsg-b5.jpg" x="0" y="0" width="100%" height="680" />
    </pattern>
  </defs>
  <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>

</svg>
</div>
</body>
</html>

Ответы [ 2 ]

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

Крис прав, вам нужно установить сохранение соотношения сторон для среза xMidYMax. 

preserveAspectRatio="xMidYMax slice"

Но он пропустил часть с фиксированной высотой 370 пикселей.Для этого варианта использования полезно установить обертку с position: relative и overflow: hidden

Вот она: 

body{
  background-color: grey;
  margin: 0;
  padding: 0;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 370px;
  overflow: hidden;
  background: green;
}
.wrapper svg {
  position: absolute;
  top: 0; right: 0; left: 0;
}
<body>
  <div class="wrapper">
      <svg viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
        <defs>
          <pattern id="img1" patternUnits="userSpaceOnUse" width="101%" height="101%">
              <image preserveAspectRatio="xMidYMid slice"  xlink:href="https://images.furnituredealer.net/img/collections%2Fsignature_design_by_ashley%2Fdarcy%207500_75000-lsg-b5.jpg" x="0" y="0" width="100%" height="100%" />
          </pattern>
        </defs>
        <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
      </svg>
  </div>
  <h1> Hello World! </h1>
</body>

Я добавил несколько цветов и текста, чтобы сделать его более ярким.

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

Прежде всего просто нужно настроить сохранение соотношения сторон до xMidYMax slice, посмотрите пример и надеюсь, что это поможет.Ура! 

body{
  background-color: black;
}

svg {
  position: absolute;
  top: 0; right: 0; left: 0;
}
<svg viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
        <image preserveAspectRatio="xMidYMid slice"  xlink:href="https://images.furnituredealer.net/img/collections%2Fsignature_design_by_ashley%2Fdarcy%207500_75000-lsg-b5.jpg" x="0" y="0" width="100%" height="100%" />
    </pattern>
  </defs>
  <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...