我有一张使用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>