Короче говоря, у меня есть изображение, которое маскируется с помощью clipPath
, так что оно работает в IE 9+. Проблема в том, что мне нужно, чтобы маска скрывалась при наведении, чтобы она отображала полное изображение, а затем повторно нажимайте мышью. Сценарий, который у меня сейчас, не работает. Ручка включена ниже. Я очень новичок в SVG и clipPath
.Удалить clipPath on hover
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>
Почему бы не удалить 'клип-path' атрибут курсора мыши над и повторно применить его на мыши-аут? – Harry
Так что-то вроде этого? $ (. Finish) .mouseover (function() { $ (this) .find ('svg'). RemoveAttr ("clip-path"); }); – OMGDrAcula
Что-то вроде [this] (http://codepen.io/hari_shanx/pen/jWeMJN) (* Я изменил ширину клипа, но вы получили идею *). Это помогает? – Harry