I'm creating a web portal with maps in SVG format and set in the HTML code using <object> tag in order to preserve the possibility of interactivity. My main problem is how to create and support an interactive SVG format in the browser?
我正在创建一个包含SVG格式的Web门户，并使用
As far as I have researched there are several options:
据我所研究，有几种选择：
- SMIL animation directly in SVG,
- SMIL动画直接在SVG中，
- CSS animation,
- CSS动画，
- JavaScript libraries.
- JavaScript库。
It seems to me that this last option has the most potential. There are many libraries (Snap.svg, svg.js, Velocity.js, d3.js, jVectorMap.js, GreenSock ....) to use, so I would appreciate if someone could give some tips on which of them to use.
在我看来，这最后一个选项最具潜力。有许多库（Snap.svg，svg.js，Velocity.js，d3.js，jVectorMap.js，GreenSock ....）可以使用，所以如果有人可以提供一些关于它们使用的技巧，我将不胜感激。
Do I need to use them within the SVG directly using the <script> tag or using an external .js file? To my knowledge, jQuery can't be used directly within SVG.
我是否需要使用
1 个解决方案
#1
1
In fact, all three variants work more or less with different advantages and drawbacks.
事实上，所有三种变体或多或少都有不同的优点和缺点。
1. SMIL
1. SMIL
SMIL is easy to use inside of your SVG and allows modifying attributes of your SVG object directly. However, if you want/need to support Internet Explorer or Edge, you don't have much luck (see CanIUse).
SMIL易于在SVG内部使用，并允许直接修改SVG对象的属性。但是，如果您需要/需要支持Internet Explorer或Edge，则运气不佳（请参阅CanIUse）。
Chrome 45 deprecated SMIL in favor of CSS animations and Web animations. But the Chrome developers recently suspended their intent (see this * answer).
Chrome 45弃用了SMIL，转而支持CSS动画和Web动画。但Chrome开发人员最近暂停了他们的意图（请参阅此*答案）。
2. CSS Animations
2. CSS动画
These are a good alternative for animation of SVGs. The implementation is normally very fast and smooth, as far as I saw it. Browser support is better especially with Microsoft Browsers. So I would really recommend it.
这些是SVG动画的一个很好的选择。就我所见，实施通常非常快速和顺利。浏览器支持更好，特别是对于Microsoft浏览器。所以我真的推荐它。
If you need some more user interaction, you get to the limits of CSS animations quickly. Some interaction is possible, but if you want more, you need JavaScript.
如果您需要更多用户交互，您可以快速达到CSS动画的限制。有些交互是可能的，但如果你想要更多，你需要JavaScript。
3. JavaScript libraries
3. JavaScript库
jQuery really have serious problems with SVGs, but I think it is better doing without jQuery (for both, jQuery and your software) because if it would support SVGs, it would be even larger and slower. However, if you already have jQuery included, it is possible to select elements and then animate them without jQuery.
jQuery确实存在严重的SVG问题，但我认为没有jQuery（对于jQuery和你的软件）更好，因为如果它支持SVG，它会更大更慢。但是，如果您已经包含了jQuery，则可以选择元素，然后在不使用jQuery的情况下为它们设置动画。
Other libraries are more specialized for SVG and work really great (I myself worked with d3.js with good results).
其他库更专门用于SVG并且工作非常好（我自己使用d3.js并且效果很好）。
Recommendation
建议
If you don't need to support Microsoft browsers, then SMIL can be an easy and compact way to define certain animations.
如果您不需要支持Microsoft浏览器，那么SMIL可以是一种简单而紧凑的方式来定义某些动画。
If you need those browsers, I would recommend trying CSS animations. But if that seems too static, one of the JavaScript libraries may help.
如果您需要这些浏览器，我建议您尝试使用CSS动画。但如果这看起来太静态，那么其中一个JavaScript库可能会有所帮助。
#1
1
In fact, all three variants work more or less with different advantages and drawbacks.
事实上，所有三种变体或多或少都有不同的优点和缺点。
1. SMIL
1. SMIL
SMIL is easy to use inside of your SVG and allows modifying attributes of your SVG object directly. However, if you want/need to support Internet Explorer or Edge, you don't have much luck (see CanIUse).
SMIL易于在SVG内部使用，并允许直接修改SVG对象的属性。但是，如果您需要/需要支持Internet Explorer或Edge，则运气不佳（请参阅CanIUse）。
Chrome 45 deprecated SMIL in favor of CSS animations and Web animations. But the Chrome developers recently suspended their intent (see this * answer).
Chrome 45弃用了SMIL，转而支持CSS动画和Web动画。但Chrome开发人员最近暂停了他们的意图（请参阅此*答案）。
2. CSS Animations
2. CSS动画
These are a good alternative for animation of SVGs. The implementation is normally very fast and smooth, as far as I saw it. Browser support is better especially with Microsoft Browsers. So I would really recommend it.
这些是SVG动画的一个很好的选择。就我所见，实施通常非常快速和顺利。浏览器支持更好，特别是对于Microsoft浏览器。所以我真的推荐它。
If you need some more user interaction, you get to the limits of CSS animations quickly. Some interaction is possible, but if you want more, you need JavaScript.
如果您需要更多用户交互，您可以快速达到CSS动画的限制。有些交互是可能的，但如果你想要更多，你需要JavaScript。
3. JavaScript libraries
3. JavaScript库
jQuery really have serious problems with SVGs, but I think it is better doing without jQuery (for both, jQuery and your software) because if it would support SVGs, it would be even larger and slower. However, if you already have jQuery included, it is possible to select elements and then animate them without jQuery.
jQuery确实存在严重的SVG问题，但我认为没有jQuery（对于jQuery和你的软件）更好，因为如果它支持SVG，它会更大更慢。但是，如果您已经包含了jQuery，则可以选择元素，然后在不使用jQuery的情况下为它们设置动画。
Other libraries are more specialized for SVG and work really great (I myself worked with d3.js with good results).
其他库更专门用于SVG并且工作非常好（我自己使用d3.js并且效果很好）。
Recommendation
建议
If you don't need to support Microsoft browsers, then SMIL can be an easy and compact way to define certain animations.
如果您不需要支持Microsoft浏览器，那么SMIL可以是一种简单而紧凑的方式来定义某些动画。
If you need those browsers, I would recommend trying CSS animations. But if that seems too static, one of the JavaScript libraries may help.
如果您需要这些浏览器，我建议您尝试使用CSS动画。但如果这看起来太静态，那么其中一个JavaScript库可能会有所帮助。