用完整的背景图像填充 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

您可以像这样将路径用作剪切路径：

<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 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 中渲染图像，但是有一个更简单的解决方案可以实现相同的效果。

最好采用这种方法：

1. 定期将您的图像渲染为<img> 元素，或作为background-image 的<div>。在容器中按您想要的方式定位和设置样式。

2. 在图像顶部放置一个与页面（或父元素）背景相匹配的形状。这个形状可以是<svg>，特别是如果你想要曲线和复杂的边缘形状，但根据你的需要，你可以用旋转5度的彩色<div>来实现。性能更高。

这样可以正常管理和加载图像，而不会被困在 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>

Answer 4

这是一个纯 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>