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

时间：2019-01-28 22:31:12

标签： css html5 svg clip-path

我有一个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>

3 个答案:

答案 0 :(得分：2)

我将使用可以单独操作的其他元素来重新创建它。

我打了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>

答案 1 :(得分：2)

最简单的解决方案是将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.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 :(得分：1)

要使其可点击，您需要在每条路径上加上标记和<a href=""><path id="wave1">... </a>标签。然后，向每个路径添加一个ID，然后在CSS中执行a svg:hover #wave1 {code to change the element on hover}

相关问题
最新问题