为Web门户创建交互式SVG映射

Question

我正在创建一个包含SVG格式地图的门户网站，并使用<object>标记在HTML代码中设置，以保留交互的可能性。我的主要问题是如何在浏览器中创建和支持交互式SVG格式？

据我所研究，有几种选择：

1. 直接在SVG中创建SMIL动画，
2. CSS动画，
3. JavaScript库。

在我看来，这最后一个选项最具潜力。有许多库（Snap.svg，svg.js，Velocity.js，d3.js，jVectorMap.js，GreenSock ....）可以使用，所以如果有人可以给出一些关于它们使用的技巧，我将不胜感激

我是否需要使用<script>标记或使用外部.js文件直接在SVG中使用它们？据我所知，jQuery不能直接在SVG中使用。

Answer 1

事实上，这三种变体或多或少都有不同的优点和缺点。

<强> 1。 SMIL

SMIL易于在SVG内部使用，并允许直接修改SVG对象的属性。但是，如果您希望/需要支持Internet Explorer或Edge，则运气不佳（请参阅CanIUse）。

Chrome 45弃用了SMIL，转而支持CSS动画和网络动画。但Chrome开发人员最近暂停了他们的意图（请参阅this StackOverflow answer）。

<强> 2。 CSS动画

这些是SVG动画的一个很好的选择。就我所见，实施通常非常快速和顺利。 Browser support is better，尤其是Microsoft浏览器。所以我真的推荐它。

如果您需要更多用户交互，您可以快速达到CSS动画的限制。有些交互是可能的，但如果你想要更多，你需要JavaScript。

第3。 JavaScript库

jQuery确实存在严重的SVG问题，但我认为没有jQuery（对于jQuery和你的软件）更好，因为如果它支持SVG，它会更大更慢。但是，如果您已经包含 jQuery，则可以选择元素，然后在不使用jQuery的情况下为它们设置动画。

其他库更专业于SVG并且工作非常好（我自己使用d3.js并且效果很好）。

<强>建议

如果您不需要支持Microsoft浏览器，那么SMIL可以轻松而简便地定义某些动画。

如果您需要这些浏览器，我建议您尝试使用CSS动画。但如果这看起来太静态，那么其中一个JavaScript库可能会有所帮助。