Hover events for SVG clip-path with mutiple paths

问题

I have an SVG demo image that consist multiple circles that are clipping an animated GIF.

Is it possible to watch hover events for each individual circle as the user mouses over them? For example the top-left circle or the middle-right circle.

Also is it possible to manipulate color overlay on those circles as they are hovered?

EDIT: Ideally I would like the hover to apply a color over the hovered circle and be clickable to take someone to another page.

EDIT 2: On hover as well as changing an overlay color I'd like for there to be text centered in the circle.

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>

回答1:

The simplest solution is to move the GIF into the SVG so that you can reliably align the overlay circles with the clip path holes.

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.stackoverflow.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.stackoverflow.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.stackoverflow.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.stackoverflow.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.stackoverflow.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.stackoverflow.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>

回答2:

I would recreate this with different element that you can manipulate separately.

I made 9 holes but you can easily reduce them like your example by removing background from the needed element.

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>

回答3:

Well to make it clickable you need to put every path insive and <a href=""><path id="wave1">... </a> tag. Then you add an id to each path and in the css you just do a svg:hover #wave1 {code to change the element on hover}

来源：https://stackoverflow.com/questions/54411246/hover-events-for-svg-clip-path-with-mutiple-paths

标签

css

html5

svg

clip-path