Заполните путь SVG с полным фоновым изображением

Question

У меня есть следующий svg:

<svg 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="483px" height="255px">
   <path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
   d="M-0.000,-0.001 L483.001,1.873 L266.099,254.997 L-0.000,254.997 L-0.000,-0.001 Z"/>
</svg>

https://i.stack.imgur.com/1pdB7.png

Как мне вставить фоновое изображение с центром позиции и без повторяющихся атрибутов?Как в этом примере:

https://i.stack.imgur.com/tUqbr.png

Я действительно ценю ваши ответы, Спасибо!

Answer 1

Вот только CSS решение для этого:

.box {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.box span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: top left;
  transform: skewX(-20deg);
  overflow: hidden;
}

.box span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: top left;
  transform: skewX(20deg);
  background: url(https://picsum.photos/800/600?image=0) center/cover;
}


body {
 background:pink;
}

<div class="box">
  <span></span>
</div>

И если вам не нужна прозрачность, вы можете использовать меньше кода

.box {
  width: 400px;
  height: 200px;
  position: relative;
  background:
    linear-gradient(to bottom right,transparent 49.8%,pink 50%) right/20% 100% no-repeat,
    url(https://picsum.photos/800/600?image=0) center/cover;
}
body {
 background:pink;
}

<div class="box">
</div>

Другой способ с clip-path

.box {
  width: 400px;
  height: 200px;
  position: relative;
  background:url(https://picsum.photos/800/600?image=0) center/cover;
  -webkit-clip-path:polygon(0 0,0 100%, 80% 100%, 100% 0);
  clip-path:polygon(0 0,0 100%, 80% 100%, 100% 0);
}
body {
 background:pink;
}

<div class="box">
</div>

Answer 2

Вы можете использовать шаблон для заполнения фонового изображения.

<svg 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="483px" height="255px">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
            <image xlink:href="download.jpg" x="0" y="0"
                width="600" height="450" />
        </pattern>
    </defs>
    <path d="M-0.000,-0.001 L483.001,1.873 L266.099,254.997 L-0.000,254.997 L-0.000,-0.001 Z"
          fill="url(#img1)" />

</svg>

Answer 3

Вы можете использовать путь в качестве обтравочного контура следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="483px" height="255px">
 <defs>   
  <clipPath id="theClippingPath" > 
  <path 
   d="M-0.000,-0.001 L483.001,1.873 L266.099,254.997 L-0.000,254.997 L-0.000,-0.001 Z"/>
 </clipPath> 
  </defs> 
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="485" width="485" clip-path="url(#theClippingPath)"></image>
</svg>

Answer 4

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

Вероятно, лучше использовать этот подход:

1. Регулярно визуализируйте изображение как элемент <img> или background-image для <div>.Расположите его так, как вы хотите, внутри контейнера.

2. Поместите фигуру на верхнюю часть изображения, сбоку, которая соответствует фону вашей страницы (или родительского элемента).Эта форма может быть <svg>, особенно если вам нужны изогнутые линии и сложные формы краев, но для ваших нужд вы можете просто сделать это с цветным <div>, повернутым на 5 градусов.Гораздо более производительный.

Таким образом, изображение может управляться и загружаться в обычном режиме, а не быть захваченным внутри SVG.Выполнение фактических масок / отсечения элементов и изображений возможно, но вам придется бороться с ошибками браузера и проблемами совместимости.

Codepen

.container { 
  width: 600px;
  height: 200px;
  overflow: hidden;
  position: relative;
  background-color: #000000;
  margin-bottom: 2em;
  color: #ffffff;
}

.container_inner {
  padding: 2em;
}

#side-shape {
    height: 400%;
    background-color: #ffffff;
    position: absolute;
    width: 200px;
    right: -10%;
    top: -200%;
    z-index: 1;
    transform: rotate(5deg); 
}


#side-shape2 {
  fill: #ffffff;
    height: 100%;
    position: absolute;
    width: 200px;
    right: 0%;
    top: 0%;
    z-index: 1;
}

<div class="container">
  
  <div class="container_inner">
  MY IMAGE
  
  <p>Either an &lt;img&gt; element,</p>
  <p>  or a background-image for the container.
    
  <p>The side slash is just a white &lt;div&gt; rotated 5 degrees.</p>
  </div>  
  
  <div id="side-shape"></div>
  
</div>


<div class="container">
  
  <div class="container_inner">
  SAME AS ABOVE
  
  <p>Same as above, except The side slash is a white &lt;svg&gt; triangle.</p>
  
<svg id="side-shape2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="100 0, 100 100, 90 100"/>
</svg>
  
</div>