在悬停时动画SVG图像蒙版

Question

我有一个带有SVG掩码的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（请参阅下面的评论）。

Answer 1

您无法使用CSS来操纵外部文件的内容。 CSS不适用于文档边界。如果你内联SVG，它应该是可能的。