简而言之,我有一个使用 clipPath
屏蔽的图像,因此它可以在 IE 9+ 中工作。问题是我需要在悬停时隐藏蒙版以显示完整图像,然后在鼠标移开时重新应用。我现在拥有的脚本不起作用。笔在下面。我对 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>
最佳答案
更改 clipPath
元素的 display
属性本身没有任何效果,因为 clipPath
只是一个定义,它没有任何自己的展示。它是由定义的 clipPath
裁剪后显示的 image
。因此,一个简单的解决方案是在鼠标移入时删除 clip-path
属性,然后在鼠标移出时再次添加它(连同原始剪辑路径 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>
关于javascript - 悬停时删除 clipPath,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35229532/