SVG掩码上的CSS转换？

我在一个内联SVG中有一个图像，当它悬停在上面时，它会在两个遮罩之间切换

但是，CSS转换不能使用

转换属性：mask

是否有其他方法可用于CSS转换？

我还尝试了设置
样式，但似乎无法设置定义元素的样式（？）



/*  */
不能设置动画的不是
mask
属性，而是
url（）

要创建转换，您需要有一个状态1，该状态1变为状态2，并且可以在两个状态之间创建插值。

当您使用
url（#1）
并希望转到
url（#2）
时，无法在这两种状态之间创建任何插值，因为
url（#1.5）
将不是中间状态

但是可以设置动画的是你的面具的内容

在SVG2中，您可以直接从CSS设置发生更改的属性（即
cx
和
cy
），但这仍然仅受Blink和Safari浏览器的支持：



/*圈{
过渡性质：cx，cy；
过渡时间：0.4s；
过渡定时功能：易进易出；
}
.mask_hover a:hover+defs#mask>circle，
.mask_悬停a:活动+除雾#mask>圆圈{
cx:416；
cy:216；
}
/* ]]> */
感谢您给出了解释得很好的答案！我应该多解释一下我的目标和原因。我要设置动画的过渡是淡入/淡出效果。我通过设置图像的不同实例的不透明度的动画来实现这一点，每个实例的剪裁都不同（）。问题是，在处理大量剪切路径（近50条）时，它的性能不佳。您认为可以将遮罩的填充颜色从黑色（不可见）设置为白色（可见）吗？是的，现在可以设置动画，因此这在理论上应该是可行的，但同样，您可能会在不同的实现中遇到很多差异，特别是旧的IE可能无法工作。鉴于
必然位于
内部，您知道一种确定填充颜色的方法吗？我没办法。我也是这么做的：你把def作为你的兄弟移动，然后
a:hover+def>mask>circle{fill:#CCC}
啊，我明白了。明亮的我不知道这是可能的。我将尝试这种方法。