如何使用SVG剪貼蒙版剪裁圖像的特定區域

Question

我正在通過SVG剪輯路徑進行剪貼蒙版。我正在使用一個帶有三個剪裁遮罩的SVG元素。

問題是我的svg正在獲得完整的窗口寬度和高度，因此圖像也獲得了完整的寬度和高度。

所以我想要是移動圖像剪切路徑裏面，這樣我可以顯示圖像

這裏是Jsfiddle鏈路的實際面積。

我不想改變圖像的縱橫比。 請讓我知道是否有任何方法。

感謝

Answer 1

如果你不想讓你的圖片拉伸，打破他們的寬高比，那麼就不要使用preserveAspectRatio="none"。您可能需要使用"xxx slice"變體之一。下面，我爲每幅圖像使用了不同的圖像，以使它們分別對齊左側，中間和右側。

*{padding:0px; margin: 0px;} 
 
html, body {width: 100%; height: 100%;}

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
      xml:space="preserve"> 
 
    <clipPath id="last" clipPathUnits="objectBoundingBox"> 
 
     <polygon points="1,0 .78,0 0.58,1 1,1"/> 
 
    </clipPath> 
 
    <clipPath id="first" clipPathUnits="objectBoundingBox"> 
 
     <polygon points="0,0 0.4,0 0.218,1 0,1"/> 
 
    </clipPath> 
 
    <clipPath id="mid" clipPathUnits="objectBoundingBox"> 
 
     <polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/> 
 
    </clipPath> 
 
    <image class="topImage" clip-path="url(#mid)" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"/> 
 
    <!-- top --> 
 
    <image class="leftImage" clip-path="url(#first)" preserveAspectRatio="xMinYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/> 
 
    <!-- right --> 
 
    <image class="rightImage" clip-path="url(#last)" preserveAspectRatio="xMaxYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/> 
 
    </svg>

更新

[我]仍無法獲得第一圖像的精確視圖。我想展現女孩的臉。但它沒有發生

一個解決方案是改變你的圖像，使感興趣的區域在圖像的所需部分。

否則，您需要開始使用viewBoxes。但是，一旦viewBox涉及，但不能再按照原始示例拉伸父SVG以填充頁面寬度和高度。您必須對圖像整體的固定長寬比感到滿意。

這裏有一種方法來解決問題：

*{padding:0px; margin: 0px;} 
 
html, body {width: 100%; height: 100%;}

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2 1"> 
 
    <defs> 
 
    <clipPath id="mid" clipPathUnits="objectBoundingBox"> 
 
     <polygon points="0.3,0 1,0 0.7,1 0,1"/> 
 
    </clipPath> 
 
    </defs> 
 

 
    <image class="leftImage" preserveAspectRatio="xMaxYMid slice" width="1" height="1" 
 
     xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/> 
 

 
    <image class="rightImage" preserveAspectRatio="xMidYMid slice" x="1" width="1" height="1" 
 
     xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/> 
 

 
    <image class="topImage" preserveAspectRatio="xMidYMid slice" x="0.5" width="1" height="1" 
 
     xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg" 
 
     clip-path="url(#mid)"/> 
 

 
</svg>

Answer 2

你可能想改變x（也許在y，太）爲你的形象和相反的轉換應用到他們的相應的剪切路徑。

<!-- language: lang-html --> 

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" 
     xml:space="preserve"> 
    <clipPath id="last" clipPathUnits="objectBoundingBox" transform="translate(-200,0)"> 
     <polygon points="1,0 .78,0 0.58,1 1,1"/> 
    </clipPath> 
    <clipPath id="first" clipPathUnits="objectBoundingBox" transform="translate(450,0)"> 
     <polygon points="0,0 0.4,0 0.218,1 0,1"/> 
    </clipPath> 
    <clipPath id="mid" clipPathUnits="objectBoundingBox"> 
     <polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/> 
    </clipPath> 
    <image class="topImage" clip-path="url(#mid)" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"/> 
    <!-- top --> 
    <image class="leftImage" clip-path="url(#first)" width="100%" height="100%" x="-450" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/> 
    <!-- right --> 
    <image class="rightImage" clip-path="url(#last)" width="100%" height="100%" x="200" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/> 
</svg> 

但是，如果你沒有固定svg或其容器的最小和maxumum的寬度和高度，你可能會顯示其邊界外的圖像的空白部分。您可以在css上爲svg或其容器設置min-height，max-height，min-width或max-width。另外，由於顯示有趣的區域取決於設備/瀏覽器的寬度，所以額外的增強將是根據用戶的寬度自動計算確切的翻譯以使感興趣的區域與腳本居中。