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