title: Remove clipPath on hover
body: <p>In short I have an image that is masked using <code>clipPath</code> so that it works in IE 9+. The issue is I need to have the mask hide on hover so that it reveals the full image, then reapply on mouseout. The script I have right now does not work. Pen is included below. I am very new to SVG and <code>clipPath</code>.</p>
  
  <p><a href="http://codepen.io/OMGDrAcula/pen/eJPzQx" rel="nofollow">http://codepen.io/OMGDrAcula/pen/eJPzQx</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.finish')
      .mouseover(function() {
        $(this).find('svg').find('clipPath').css('display', 'none');
      }).mouseout(function() {
        $(this).find('svg').find('clipPath').css('display', 'block');
      });
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-xs-3 finish" style="position:relative;border:1px solid red;"&gt;
    &lt;img src="http://placehold.it/297x252" class="img-responsive" /&gt;
    &lt;svg preserveAspectRatio="xMidYMin slice" style="width:100%;height:252px;top:0;left:0;position:absolute;border:dotted 2px blue" version="1.1" xmlns="http://www.w3.org/2000/svg" width="297" height="252" x="0px" y="0px" style="enable-background:new 0 0 297 252;"
    viewBox="0 0 297 252" xml:space="preserve"&gt;
      &lt;defs&gt;
        &lt;clipPath id="maskID0"&gt;
          &lt;rect width="100%" height="252" x="0" y="0" /&gt;
        &lt;/clipPath&gt;
      &lt;/defs&gt;
      &lt;title&gt;Test Image&lt;/title&gt;
      &lt;desc&gt;Test 123&lt;/desc&gt;
      &lt;image clip-path="url(#maskID0)" width="297" height="252" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://placehold.it/297x252"&gt;&lt;/image&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>