Css Chrome和Opera中的SVG转换问题
我有一个内联SVG，我想在悬停时设置它的动画。按照它的外观，在您悬停后，一个圆圈会变大并反转SVG。也就是说，过去不透明的东西现在是透明的。这是通过在遮罩内圆的半径参数上使用CSS转换来完成的 动画在Safari中完美无瑕，但在Chrome和Opera中则不然。在这些浏览器中，它的行为非常怪异。简而言之，它似乎只在光标离开屏幕时重新绘制SVG Firefox什么都不做，但我认为这是因为缺少vendeor前缀 提前感谢您的帮助 我该怎么补救呢？我可以采取什么替代方法 这是一支笔（似乎没有生气）：Css Chrome和Opera中的SVG转换问题,css,google-chrome,svg,transition,opera,Css,Google Chrome,Svg,Transition,Opera,我有一个内联SVG，我想在悬停时设置它的动画。按照它的外观，在您悬停后，一个圆圈会变大并反转SVG。也就是说，过去不透明的东西现在是透明的。这是通过在遮罩内圆的半径参数上使用CSS转换来完成的 动画在Safari中完美无瑕，但在Chrome和Opera中则不然。在这些浏览器中，它的行为非常怪异。简而言之，它似乎只在光标离开屏幕时重新绘制SVG Firefox什么都不做，但我认为这是因为缺少vendeor前缀 提前感谢您的帮助 我该怎么补救呢？我可以采取什么替代方法 这是一支笔（似乎没有生气）：
*
{
保证金：0；
填充：0；
}
身体
{
宽度：100%；
身高：100%；
背景：#0f0f；
}
svg
{
位置：相对位置；
宽度：60%；
身高：60%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#svg_tm
{
过渡：R350ms；
}
svg:hover#svg_tm
{
r:50；
}
r您将需要使用另一种方法来设置半径的动画。在
过渡中r
的内容：r 350ms代表？它是动画圆的半径属性。这就是SVG中的调用方式。在他们的bugtracker上引发一个Chrome错误。
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
body
{
width:100%;
height:100%;
background: #0F0F0F;
}
svg
{
position: relative;
width: 60%;
height:60%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#svg_tm
{
transition: r 350ms;
}
svg:hover #svg_tm
{
r: 50;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<circle id="svg_tm" cx="50" cy="50"></circle>
<path id="svg_ts" d="M86.915 27.103c-2.716 1.204-5.636 2.02-8.7 2.385 3.128-1.875 5.53-4.843 6.66-8.38-2.926 1.735-6.168 2.996-9.618 3.675C72.494 21.84 68.557 20 64.2 20c-8.365 0-15.147 6.782-15.147 15.147 0 1.187.134 2.343.392 3.452-12.588-.633-23.75-6.663-31.22-15.827-1.304 2.237-2.05 4.838-2.05 7.615 0 5.255 2.673 9.89 6.737 12.607-2.482-.08-4.818-.76-6.86-1.894l-.002.19c0 7.34 5.222 13.462 12.15 14.854-1.27.346-2.608.53-3.99.53-.976 0-1.925-.094-2.85-.27C23.29 62.42 28.883 66.8 35.51 66.92c-5.184 4.063-11.715 6.484-18.812 6.484-1.222 0-2.428-.07-3.613-.21C19.788 77.492 27.75 80 36.305 80 64.164 80 79.4 56.92 79.4 36.903c0-.657-.014-1.31-.043-1.96 2.96-2.135 5.527-4.803 7.558-7.84"/>
<mask id="svg_ta">
<use xlink:href="#svg_ts" fill="#fff"></use>
<use xlink:href="#svg_tm"></use>
</mask>
<mask id="svg_tb">
<use xlink:href="#svg_tm" fill="#fff"></use>
<use xlink:href="#svg_ts"></use>
</mask>
</defs>
<circle r="50" cx="50" cy="50" fill="#F0F0F0" mask="url(#svg_ta)"></circle>
<circle r="50" cx="50" cy="50" fill="#F0F0F0" mask="url(#svg_tb)"></circle>
</svg>
</body>
</html>