How to center-align an image in an SVG clip-path?
<p>I have an image that is clipped using an SVG clipPath. However I'd like that the image is center-aligned horizontally &amp; vertically within the clipPath.</p>

<p>Is there a way to do this?</p>

<pre><code>&lt;!-- SVG Reference --&gt;
&lt;svg height="0" width="0"&gt;
  &lt;defs&gt;
    &lt;clipPath id="svgPath2"&gt;
      &lt;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"/&gt;
    &lt;/clipPath&gt;
  &lt;/defs&gt;
&lt;/svg&gt;
&lt;!-- SVG Reference --&gt;

&lt;div class="arrow-cards"&gt;
  &lt;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);"&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://codepen.io/aguerrero/pen/LGqMVq" rel="nofollow">http://codepen.io/aguerrero/pen/LGqMVq</a></p>