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

最好采用这种方法：

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

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

这样图像就可以正常管理和加载，而不会被困在 SVG 中。对元素和图像进行实际的遮罩/剪辑是可能的，但您必须努力解决浏览器错误和兼容性问题。

代码笔

.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>