在悬停时删除 clipPath答案

【问题标题】：Remove clipPath on hover在悬停时删除 clipPath
【发布时间】：2016-02-06 16:26:18
【问题描述】：

简而言之，我有一个使用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>

【问题讨论】：

为什么不在鼠标悬停时删除 clip-path 属性并在鼠标移出时重新应用它？
这样的？ $(.finish).mouseover(function() { $(this).find('svg').removeAttr("clip-path"); });
类似this 的东西（我已经修改了剪辑路径的宽度，但你明白了）。这有帮助吗？
@harry 只是为了确保我理解你在做什么。悬停时，您将剪辑路径设置为在 mouseenter 上没有 url，然后在 mouseout 上添加原始 url 正确吗？
您能否将其添加为答案，以便我为您接受？

标签： javascript jquery html css svg

【解决方案1】：

更改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>

【讨论】：