使用完整的背景图像填充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>元素，或作为<div>的background-image 。 在容器中定位和设计您想要的样式。

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> 

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

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