为门户网站创建交互式SVG地图 [英] Creating interactive SVG maps for a web portal

问题描述

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

据我研究，有几种选择：

1. 直接在SVG中使用SMIL动画，
   
2. CSS动画，
   
3. JavaScript库
/ li>

在我看来，最后一个选项最具潜力。有很多库（Snap.svg，svg.js，Velocity.js，d3.js，jVectorMap.js，GreenSock ....）可供使用，所以我希望如果有人能提供一些关于他们使用哪些的技巧。

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

解决方案

事实上，所有这三个变体或多或少地与不同的优点和缺点。

1。 SMIL

SMIL易于在SVG中使用，并允许直接修改SVG对象的属性。但是，如果您需要/需要支持Internet Explorer或Edge，则没有太多好运（请参阅 CanIUse ）。

Chrome 45弃用了SMIL，以支持CSS动画和Web动画。但Chrome开发者最近暂停了他们的意图（请参阅此StackOverflow答案）。

2。 CSS动画

这是SVG动画的一个很好的选择。就我所见，实施通常非常快速且顺畅。 浏览器支持更好，尤其是Microsoft浏览器。所以我真的会推荐它。

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

3。 JavaScript库

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

其他库更专用于SVG和工作真的很棒（我自己曾与d3.js合作过，效果很好）。

建议

如果您不需要支持Microsoft浏览器，那么SMIL可以成为定义某些动画的简单而紧凑的方式。

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

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?

As far as I have researched there are several options:

1. SMIL animation directly in SVG,
2. CSS animation,
3. JavaScript libraries.

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.

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.

解决方案

In fact, all three variants work more or less with different advantages and drawbacks.

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).

Chrome 45 deprecated SMIL in favor of CSS animations and Web animations. But the Chrome developers recently suspended their intent (see this StackOverflow answer).

2. CSS Animations

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.

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.

3. JavaScript libraries

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.

Other libraries are more specialized for SVG and work really great (I myself worked with d3.js with good results).

Recommendation

If you don't need to support Microsoft browsers, then SMIL can be an easy and compact way to define certain animations.

If you need those browsers, I would recommend trying CSS animations. But if that seems too static, one of the JavaScript libraries may help.

这篇关于为门户网站创建交互式SVG地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！