我有一个SVG演示图像,其中包含多个圆圈对动画GIF进行裁剪。
用户在悬停在每个单独的圆圈上时,是否可以观察到其悬停事件?例如左上角圆圈或中间右侧圆圈。
此外,在悬停时是否可以操纵这些圆圈上的颜色叠加?
编辑:理想情况下,我希望悬停应用于悬停的圆圈并可点击以将某人带到另一页。
编辑2:在悬停时,除了更改覆盖颜色外,我希望在圆圈中心有文本。
用户在悬停在每个单独的圆圈上时,是否可以观察到其悬停事件?例如左上角圆圈或中间右侧圆圈。
此外,在悬停时是否可以操纵这些圆圈上的颜色叠加?
编辑:理想情况下,我希望悬停应用于悬停的圆圈并可点击以将某人带到另一页。
编辑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>