我有一张带有 SVG mask 的 JPG:
<img src="thumb.jpg" class="thumb">
.thumb {
mask: url('mask.svg#mask');
-webkit-mask-image: url('mask.svg');
}
到目前为止,还不错。
我想要的是当图像悬停时 SVG 元素动画。使用普通的 SVG 这将很容易,因为我可以使用 CSS 定位元素。带着面具我不太确定。我无法直接定位元素,因为它们不存在于 DOM 中。
#thumb-mask {
&:hover {
path {
opacity: 0 !important;
}
}
}
我已经在 SVG 中尝试了 onmouseover 事件,但它们似乎没有被触发。
<path ...
onmouseover="evt.target.setAttribute('opacity', '0.5');"
onmouseout="evt.target.setAttribute('opacity', '1')" />
这可能吗?
编辑:如果我将 SVG 内联,当图像悬停时我仍然无法定位它。此外,我有多个 .thumb
,因此如果它们要独立设置动画,我将需要多个 SVG(请参阅下面我的评论)。
最佳答案
您不能使用 CSS 来操纵外部文件的内容。 CSS 不能跨文档边界工作。如果你内联 SVG,它应该是可能的。
关于css - 悬停时动画 SVG 图像蒙版,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26936475/