如何在SVG剪輯路徑中居中對齊圖像？

Question

我有一個使用SVG clipPath剪輯的圖像。不過，我希望圖像在clipPath中垂直居中對齊&。

有沒有辦法做到這一點？

<!-- SVG Reference --> 
<svg height="0" width="0"> 
    <defs> 
    <clipPath id="svgPath2"> 
     <path fill="#00B6B5" d="M262.229,81.068l-29.486-66.662 
           c-1.598-3.248-4.91-5.309-8.537-5.309H17.394c-6.408,0-10.596,6.703-7.773,12.441l26.736,61.072 
           c1.697,3.449,1.676,7.494-0.059,10.926L9.827,152.482c-2.902,5.742,1.283,12.521,7.732,12.521h206.715 
           c3.592,0,6.879-2.018,8.494-5.217l29.387-64.717C264.378,90.671,264.405,85.49,262.229,81.068z"/> 
    </clipPath> 
    </defs> 
</svg> 
<!-- SVG Reference --> 

<div class="arrow-cards"> 
    <img src="http://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg" style="clip-path: url(#svgPath2); -webkit-clip-path: url(#svgPath2);"> 
</div> 

http://codepen.io/aguerrero/pen/LGqMVq

Answer 1

你夾路徑使用絕對座標，所以它基本上是固定在頁面上。 您可以設置img尺寸以匹配箭頭形狀的大小（大約258x156）。但是這會使圖像變形。

或者你可以保持圖像的縱橫比通過設置圖像258的剛寬度正確然後，通過使用相對定位到其上的特上移居中..

body, svg { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
img { 
 
    clip-path: url(#svgPath2); 
 
    -webkit-clip-path: url(#svgPath2); 
 
    position: relative; 
 
    top: -20px; 
 
}

<!-- SVG Reference --> 
 
<svg height="0px" width="0px"> 
 
    <defs> 
 
    <clipPath id="svgPath2"> 
 
     <path fill="#00B6B5" d="M262.229,81.068l-29.486-66.662 
 
           c-1.598-3.248-4.91-5.309-8.537-5.309H17.394c-6.408,0-10.596,6.703-7.773,12.441l26.736,61.072 
 
           c1.697,3.449,1.676,7.494-0.059,10.926L9.827,152.482c-2.902,5.742,1.283,12.521,7.732,12.521h206.715 
 
           c3.592,0,6.879-2.018,8.494-5.217l29.387-64.717C264.378,90.671,264.405,85.49,262.229,81.068z"/> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 
<!-- SVG Reference --> 
 

 
<div class="arrow-cards"> 
 
    <img src="http://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg" width="258"> 
 
</div>

或者更簡單的方法是將包含的div設置爲箭頭形狀的大小並將剪輯應用於該剪輯。圖像將使用​​居中。

body, svg { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.arrow-cards { 
 
    width: 265px; 
 
    height: 165px; 
 
    background-image: url(http://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg); 
 
    background-size: cover; 
 
    clip-path: url(#svgPath2); 
 
    -webkit-clip-path: url(#svgPath2); 
 
}

<div class="arrow-cards"></div> 
 

 
<!-- SVG Reference --> 
 
<svg height="0px" width="0px"> 
 
    <defs> 
 
    <clipPath id="svgPath2"> 
 
     <path fill="#00B6B5" d="M262.229,81.068l-29.486-66.662 
 
           c-1.598-3.248-4.91-5.309-8.537-5.309H17.394c-6.408,0-10.596,6.703-7.773,12.441l26.736,61.072 
 
           c1.697,3.449,1.676,7.494-0.059,10.926L9.827,152.482c-2.902,5.742,1.283,12.521,7.732,12.521h206.715 
 
           c3.592,0,6.879-2.018,8.494-5.217l29.387-64.717C264.378,90.671,264.405,85.49,262.229,81.068z"/> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 
<!-- SVG Reference -->

如果您正打算必須在頁面上各個位置的箭頭形狀，你可能會想看看有clipPathUnits="objectBoundingBox"定義您的剪輯路徑。這樣，它就可以應用到頁面上任何位置的元素，並將進行調整以適應元素的形狀。