Question

我有两张使用SVG剪切路径的图像。图像重叠。我有两个要求：A）图像和剪切路径必须流畅。 B）图像必须重叠，以便将光标置于正面图像的“剪切”部分将激活其后面图像的悬停状态。

我能够同时完成这两项工作。当我使用div通过背景图像显示图像时，我得到了正确的重叠行为，但没有流动性。当我在svg中使用image标签时（如我的代码所示），我获得了流畅性，但失去了重叠行为。

您可以在此Codepen中看到此行为。当我将光标放在正面图像的剪切部分内时，光标没有触及背面图像。（我将图像的不透明度在悬停时进行了更改，所以您知道何时触摸或不触摸它）：

https://codepen.io/chrishouse/pen/wXyVXo

我也将在此处编写代码，但是使用Codepen更容易理解。

SVG剪切路径定义：

<svg width="0" height="0" >
 <defs>
  <clipPath id="svgPath">
   <path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" />
   <path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" />
   <path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" />
   <path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" />
  </clipPath>
 </defs>
</svg>

SVG图片：

<svg id="cat1" viewbox="0 0 516 689" width="15%" >
 <image class="cat" xlink:href="http://i.imgur.com/gZPdvEB.jpg" x="0" y="0" height="689" width="516" style="clip-path: url(#svgPath);"/>
</svg>

<svg id="cat2" viewbox="0 0 516 689" width="15%" >
 <image class="cat" xlink:href="http://i.imgur.com/3rYHhEu.jpg" x="0" y="0" height="689" width="516" style="clip-path: url(#svgPath);"/>
</svg>

CSS：

.cat:hover{
  cursor: pointer;
  opacity: .5;
}

#cat2{
  margin-left: -120px;
}

具有适当重叠行为的流畅SVG剪切路径？

0 个答案: