Javascript 功能检测SVG元素上的CSS转换

我正在使用CSS转换来设置SVG元素位置的动画

然而，我发现IE似乎并不支持这一点：

这里有一个简单的例子，可以在Chrome和Safari中使用，但不能在IE（既不是IE11也不是Edge）和Firefox中使用

document.getElementById（“按钮”）.addEventListener（“单击”，moveRect，false）；
函数moveRect（）{
var rect=document.getElementById（“rect”）；
集合属性（空，“y”，300）；
}

按钮{
显示：块；
利润率：1米0；
}
svg{
边框：1px实心#ccc；
}
直肠{
填充：蓝色；
过渡：所有700毫秒的缓进缓出；
}

Move Rect

既然您使用的是js，我建议您使用svgjs，这将适用于所有浏览器。这也是一种更合适的svg动画方式。它还有一些非常好的其他特性

您可能想看看：

这是一个很好的例子：

var canvas=SVG（'drawing'）。大小（'100%，'100%）。视图框（0,0801000）
，rect=canvas.rect（100100）
，path=canvas.path("7.70935-13.33334，29.2871-30.2871-29.2871-29.2871-30.3859，29.2871-29.2871-30.3859，29.2871，4.2871，4.27185-48.2875-48.287，4.287 7，4.2871-4.287 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 1.93108,373.84089 218.53281,263.95583 344.23687,211.49702 450.97875,248.84102 576.77037,292.84963 636.43303,437.76771 591.93099,560.50775 540.55162,702.21597 376.3736,769.09583 237.6452,717.41234 80.01319,658.68628 5.9069261,475.21736 64.788247,320.50751 130.84419,146.94643 333.62587,65.607117 504.31214,131.69819 693.80625,205.0718 782.38357,427.18225 709.07382,613.84113")
，length=path.length（）
path.fill（'none'）.stroke（{宽度：1，颜色：'#ccc'}）
在（功能）过程中（位置、变形、放松）{
var p=路径点（长度*长度）
直线中心（p.x，p.y）
}).loop（真，真）

html，主体，#绘图{
宽度：100%；
身高：100%；
}

---

前提并不完全正确：至少对于Firefox来说，这不是CSS转换不起作用，而是将

x

和

y

属性识别为表示属性，因此是CSS可设置的，因此是CSS可转换的

SVG1.1中没有这种情况，仍然需要在FF和IE中实现，但SVG1.1 CSS转换在FF中确实有效

要检测

x

和

y

，只需检查SVGElement的

样式

属性中是否有这些属性

var supportSVG2XYasCSS=
document.createElements（“http://www.w3.org/2000/svg“，‘foo’）
.style.x！==未定义；
console.log（“您的浏览器不支持通过CSS设置x和y属性”+
“因此可能需要在其上进行%s CSS转换。”，
支持SVG2XYASCSS？''“不支持”，
支持SVG2XYASCSS？“”：“它也不支持”）

你检查过了吗？使用SMIL，也许你的理解是错误的，SMIL并没有被弃用。CSS和SMIL通常比javascript性能更高。有一个javascript SMIL polyfill，但我不知道javascript CSS动画polyfill抱歉，我没有太多研究，但谷歌快速搜索回来了谢谢你的回答。但我很好奇-为什么JavaScript是制作SVG动画的更合适的方法？根据我的经验-JavaScript动画通常比CSS转换的性能/平滑度低很多（因为CSS转换通常由GPU处理）.CSS动画在移动设备上看起来也更流畅。因此，只要有CSS可用，我通常都更喜欢CSS而不是JavaScript。这是错误的吗？JavaScript动画可以非常快！总是使用后台代码使事情变快或变慢。很快，svg.js 3.0将问世，其动画的性能甚至比旧的动画更高（我们在这里谈论的是一个真正的提升），但即使在2.0中，它们也足够快。这里有一个图坦卡蒙用svg.js.构建一个乒乓球游戏。这里还有另一个奇特的动画：