在懸停時刪除clipPath

Question

簡而言之，我有一個使用clipPath屏蔽的圖像，因此它可以在IE 9+中運行。 問題是我需要在懸停時隱藏遮罩，以便顯示完整的圖像，然后在mouseout上重新應用。 我現在的腳本不起作用。 筆包括在下面。 我是SVG和clipPath 。

http://codepen.io/OMGDrAcula/pen/eJPzQx

 $(document).ready(function() { $('.finish') .mouseover(function() { $(this).find('svg').find('clipPath').css('display', 'none'); }).mouseout(function() { $(this).find('svg').find('clipPath').css('display', 'block'); }); }) 

 <div class="col-xs-3 finish" style="position:relative;border:1px solid red;"> <img src="http://placehold.it/297x252" class="img-responsive" /> <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"> <defs> <clipPath id="maskID0"> <rect width="100%" height="252" x="0" y="0" /> </clipPath> </defs> <title>Test Image</title> <desc>Test 123</desc> <image clip-path="url(#maskID0)" width="297" height="252" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://placehold.it/297x252"></image> </svg> </div> 

Answer 1

更改clipPath元素本身的display屬性無效，因為clipPath只是一個定義，並且它沒有自己的任何顯示。 它是在被定義的clipPath剪切后顯示的image 。 因此，一個簡單的解決方案是在mouse-in上刪除clip-path屬性，然后在mouse-out上再次添加它（以及原始剪輯路徑URL）。

 $(document).ready(function() { $('.finish').mouseover(function() { $(this).find('svg image').removeAttr('clip-path'); }).mouseout(function() { $(this).find('svg image').attr('clip-path', 'url(#maskID0)'); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-xs-3 finish" style="position:relative;border:1px solid red;"> <img src="http://placehold.it/297x252" class="img-responsive" /> <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"> <defs> <clipPath id="maskID0"> <rect width="150" height="252" x="0" y="0" /> </clipPath> </defs> <title>Test Image</title> <desc>Test 123</desc> <image clip-path="url(#maskID0)" width="297" height="252" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://placehold.it/297x252"></image> </svg> </div>