悬停时动画 SVG 图像蒙版

Posted 2023-03-06

【中文标题】悬停时动画 SVG 图像蒙版

【英文标题】：Animating SVG image mask on hover

【发布时间】：2015-01-12 05:27:10

【问题描述】：

我有一个带有 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 内联，当图像悬停时，我仍然无法定位它。我还有多个.thumbs，所以如果它们要独立制作动画，我需要多个 SVG（请参阅下面的评论）。

【问题讨论】：

javascript 在 <img> 标记中被禁用，更普遍的是，只要在图像上下文中使用 SVG 以更接近地匹配光栅图像的工作方式。

存在一些选项，回答here 并带有一些示例编码。

@AlvinK 这和面具无关。

你不能改变<img>标签的不透明度，只有<embed>、<object>或<iframe>可以改变，因为子元素可以通过DOM访问。

是的......我在我的问题中提到了这一点。

【参考方案1】：

您不能使用 CSS 来操作外部文件的内容。 CSS 不能跨文档边界工作。如果你内联 SVG，它应该是可能的。

【讨论】：

我正在尝试在索引页面上使用一系列缩略图类型的元素。如果它们引用相同的内联 SVG，则将鼠标悬停在其中一个将触发所有它们上的掩码更改。我已经考虑将 IMG 包装在内联 SVG 中，并使用 SVG 剪辑路径元素代替掩码。我仍然在为剪辑路径设置动画时遇到问题，尤其是跨浏览器。