使用jquery的SVG查看框裁剪

Question

我正在爲我的客戶做貼紙網站。他們需要在給定的SVG圖像內進行圖像裁剪。 SVG圖像像萬聖節臉一樣不整齊（見下文）。

在i上載圖像時，它會顯示給定的圖像內。圖像的其餘部分將隱藏。

我該如何做到這一點？

Answer 1

這對SVG clipPaths來說非常簡單。它也有很好的瀏覽器支持，當然除了IE。

.defs { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.demo { 
 
    text-align:center; 
 
} 
 
.star image { 
 
    clip-path: url(#star-clip); 
 
} 
 
.hex image { 
 
    clip-path: url(#hex-clip); 
 
} 
 
.heart image { 
 
    clip-path: url(#heart-clip); 
 
} 
 
.shape image { 
 
    clip-path: url(#shape-clip); 
 
}

<svg class="defs"> 
 
    <defs> 
 
     <clipPath id="star-clip"> 
 
      <polygon id="star" points="150,7.3 196.4,101.3 300,116.3 225,189.4 242.7,292.7 150,243.9 57.3,292.7 75,189.4 0,116.3 103.6,101.3" /> 
 
     </clipPath> 
 
     <clipPath id="hex-clip"> 
 
      <polygon id="hex" points="222.5,295 77.5,295 5,150 77.5,5 222.5,5 295,150" /> 
 
     </clipPath> 
 
     <clipPath id="heart-clip"> 
 
      <path id="heart" d="M248.078,5.883c-36.691-14.739-77.771-0.839-98.517,31.125C128.817,5.044,87.735-8.856,51.043,5.883 C9.354,22.632-10.863,70.009,5.887,111.696c16.06,39.98,143.314,139.607,143.314,139.607l0.359,0.28l0.36-0.28 c0,0,127.251-99.627,143.314-139.607C309.986,70.009,289.768,22.632,248.078,5.883z"/> 
 
     </clipPath> 
 
     <clipPath id="shape-clip"> 
 
      <path id="shape" d="M132.9,0.9c-12.5,1-34.7,4.4-44.9,6.7c-33.5,7.6-55.7,28.2-63.8,58.8c-1.8,6.9-2.2,9.7-2.3,20.1c0,10.5,0.2,13.3,2.3,21.6 c9.5,40.7,33.2,90.2,71.5,149.8c10.5,16.4,14.8,21.8,22.8,29.3c4.3,3.9,8.3,6.8,13,9.2l6.9,3.4h10.9c10.9,0,10.9,0,17-2.9 c7.6-3.7,14.3-8.7,21.4-16.2c6.9-7.2,10.5-12.3,21.9-30.3C248,188.7,272,134.3,277.4,96.6c1.2-8.6,0.5-22.4-1.7-31.3 c-5.6-23.4-20.8-41.2-43.6-50.9c-15.3-6.5-27.5-10-44.5-12.5C177.7,0.5,144.9-0.1,132.9,0.9z"/> 
 
     </clipPath> 
 
    </defs> 
 
</svg> 
 
<div class="demo heart"> 
 
    <svg width="300" height="300"> 
 
     <image xlink:href="http://lorempixel.com/output/city-q-c-300-300-4.jpg" width="300" height="300" /> 
 
    </svg> 
 
</div> 
 
<div class="demo star"> 
 
    <svg width="300" height="300"> 
 
     <image xlink:href="http://lorempixel.com/output/cats-q-c-300-300-10.jpg" width="300" height="300" /> 
 
    </svg> 
 
</div> 
 
<div class="demo hex"> 
 
    <svg width="300" height="300"> 
 
     <image xlink:href="http://lorempixel.com/output/people-q-c-300-300-8.jpg" width="300" height="300" /> 
 
    </svg> 
 
</div> 
 
<div class="demo shape"> 
 
    <svg width="300" height="300"> 
 
     <image xlink:href="http://lorempixel.com/output/nightlife-q-c-300-300-6.jpg" width="300" height="300" /> 
 
    </svg> 
 
</div>

你需要定義clipPath，然後將它應用到你的形象。在演示中，我創建了一個單獨的SVG元素，其中包含所有形狀作爲路徑或多邊形定義，並簡單地使用外部樣式應用它們。當然，你可以這樣做在一個單一的SVG，如：

<svg width="120" height="120"> 
    <defs> 
     <clipPath id="shape-clip"> 
      <path id="shape" d="M60,117.4c-20.4,0-44.8-53.6-49-76.4C7.3,21,26.6,4.2,46.9,2.6c7-0.5,19.8-0.2,26.2,0 C93.5,3.4,112.7,21,109,41C104.8,63.8,79.3,117.4,60,117.4z"/> 
     </clipPath> 
    </defs> 
    <image xlink:href="http://lorempixel.com/output/nightlife-q-c-120-120-6.jpg" width="120" height="120" style="clip-path: url(#shape-clip);" /> 
</svg> 

有些事情要記住：

1. 你DEFS需要在源才能被定義在使用前（這樣例如，你不能把它們放在頁面的末尾）。
2. SVG元素defs不會顯示，但他們會佔用渲染頁面中的空間。我只是用位置：絕對強制他們的文檔流，並給他們的高度和寬度爲0，以確保他們不會混亂我的佈局。

欲瞭解更多信息，你可能想看看這些：

• Clipping and Masking in CSS，CSS技巧
• SVG Clip Path Tutorial，Jenkov.com
• Clipping, Masking and Compositing Specification，W3C爲