具有多个路径的 SVG 剪辑路径的悬停事件

Question

我有一个 SVG 演示图像，其中包含多个剪辑动画 GIF 的圆圈。

是否可以在用户将鼠标悬停在每个圈子上时观看悬停事件？比如左上圈或者右中圈。

也可以在这些圆圈悬停时操纵颜色叠加吗？

编辑： 理想情况下，我希望悬停在悬停的圆圈上应用颜色，并且可以点击将某人带到另一个页面。

编辑 2： 在悬停以及更改覆盖颜色时，我希望文本在圆圈中居中。

img {
    clip-path: url(#myClip);
    width: 100%;
}

<img src="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" alt="">

<svg width="0" height="0">
    <defs>
        <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00991, 0.01)">
            <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
            <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
            <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
            <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
            <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
            <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
        </clipPath>
    </defs>
</svg>

Answer 1

我会用您可以单独操作的不同元素重新创建它。

我打了 9 个洞，但您可以像您的示例一样通过从所需元素中删除背景来轻松减少它们。

img {
    width: 100%;
    display:bloc;
}
.container {
  position:relative;
}
.container > div {
  position:absolute;
  z-index:0;
  width:calc(100%/3);
  height:calc(100%/3);
  background:
    radial-gradient(farthest-side,transparent 90%,#fff 92%),
    linear-gradient(rgba(255,0,0,0.4),rgba(255,0,0,0.4)) center/0 0 no-repeat,
    linear-gradient(rgba(0,255,0,0.4),rgba(0,255,0,0.4)) center/0 0 no-repeat;
}
.container > div:nth-child(2n):hover {
  background-size: auto auto,0 0,auto auto;
}
.container > div:nth-child(2n+1):hover {
  background-size: auto auto,auto auto,0 0;
}
.container > div:nth-child(1) {
  top:0;
  left:0;
}
.container > div:nth-child(2) {
  top:0;
  left:calc(100%/3);
}
.container > div:nth-child(3) {
  top:0;
  left:calc(2*100%/3);
}
.container > div:nth-child(4) {
  top:calc(100%/3);
  left:0;
}
.container > div:nth-child(5) {
  top:calc(100%/3);
  left:calc(100%/3);
}
.container > div:nth-child(6) {
  top:calc(100%/3);
  left:calc(2*100%/3);
}
.container > div:nth-child(7) {
  top:calc(2*100%/3);
  left:0;
}
.container > div:nth-child(8) {
  top:calc(2*100%/3);
  left:calc(100%/3);
}
.container > div:nth-child(9) {
  top:calc(2*100%/3);
  left:calc(2*100%/3);
}

<div class="container">
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<img src="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" alt="">

</div>

Answer 2

好吧，要使其可点击，您需要将每个路径都放在中间并添加 <a href=""><path id="wave1">... </a> 标签。然后你为每个路径添加一个 id，在 css 中你只需要 a svg:hover #wave1 {code to change the element on hover}

Answer 3

最简单的解决方案是将 GIF 移动到 SVG 中，这样您就可以可靠地将覆盖圆圈与剪辑路径孔对齐。

svg {
  width: 100%;
}

.overlay path {
  fill: red;
  fill-opacity: 0;
}

.overlay path:hover {
  fill-opacity: 0.5;
}

<svg viewBox="0 0 500 500">
    <defs>
        <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00991, 0.01)">
            <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
            <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
            <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
            <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
            <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
            <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
        </clipPath>
    </defs>
    
  <image xlink:href="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" width="500" height="500" clip-path="url(#myClip)"/>

  <g class="overlay" transform="scale(4.955, 5)"><!-- 500 * the scale transform values in the clipPath -->
    <a xlink:href="http://www.whosebug.com/">
      <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
    </a>
    <a xlink:href="http://www.whosebug.com/">
      <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
    </a>
    <a xlink:href="http://www.whosebug.com/">
      <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
    </a>
    <a xlink:href="http://www.whosebug.com/">
      <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
    </a>
    <a xlink:href="http://www.whosebug.com/">
      <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
    </a>
    <a xlink:href="http://www.whosebug.com/">
      <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
    </a>
  </g>
</svg>

具有多个路径的 SVG 剪辑路径的悬停事件

Hover events for SVG clip-path with mutiple paths

html

css

svg

clip-path