我有一个嵌入式SVG，我想在悬停时对其进行动画处理。当您将鼠标悬停后，它的外观应该会变大，并会使SVG反转。即原来是不透明的现在是透明的。通过在蒙版内部的圆的radius参数上使用CSS过渡来完成此操作。
动画可以在Safari中完美运行，但不能在Chrome和Opera中运行。在这些浏览器中，它的行为很奇怪。简而言之，似乎只有在光标离开屏幕时才重新绘制SVG。
Firefox根本不执行任何操作，但我将其归因于缺少vendeor前缀。
谢谢您的帮助！
我该如何补救？我可以采取哪些替代方法？
这里是一支钢笔（似乎没有动画）：http://codepen.io/anon/pen/LGNaBw
<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>
使用SVG（1.1），您无法使用CSS修改r之类的属性。仅样式属性。
即将发布的SVG2规范允许它，并且一些浏览器已经开始实现它，但是大多数浏览器还没有实现。
您将需要使用另一种方法来设置半径的动画。