为门户网站创建交互式SVG地图

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

据我研究有几个选项：

SMIL动画直接在SVG，
CSS动画，
JavaScript库。

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

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

来源

2016-10-07 Davor Petričević

即使我们每次都需要重绘SVG。 – MarmiK

这将取决于你的意思是什么“交互性”。 –

通过鼠标悬停增加地图上符号的大小，单击鼠标时放大区域或线条元素（国家或河流），多层可显示和隐藏它们的效果，通过弹出窗口获得更多信息通过点击地图上的特定元素，平移和缩放地图...上的菜单... –

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

1 SMIL

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

Chrome 45弃用SMIL，赞成CSS动画和Web动画。但Chrome开发者最近暂停了他们的意图（见this StackOverflow answer）。

2. CSS动画

这些是SVGs的动画一个很好的选择。就我所见，实施通常非常快速且顺畅。特别是与Microsoft浏览器。所以我真的会推荐它。

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

3. JavaScript库

的jQuery真的有严重的问题，SVGs，但我认为这是没有更好的jQuery做（两个，jQuery和软件），因为如果它会支持SVGs，这将是甚至更大更慢。但是，如果您已经有包含 jQuery，则可以选择元素，然后在没有jQuery的情况下为它们制作动画。

其他图书馆更专注于SVG和工作真的很棒（我自己与d3.js一起工作，结果很好）。

建议

如果您不需要支持微软的浏览器，那么SMIL可以是一个简单和紧凑的方式来定义某些动画。

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

来源

2016-10-07 16:10:39

谢谢！我主要使用SMIL动画，但是我发现他们打算停止支持它。这让我有点沮丧。好消息是，现在他们放弃了这个想法。 CSS动画我开始研究更详细的，但不知何故它似乎仅限于我们的工作。也许最好的解决方案是立即开始研究一些支持SVG的JS库来处理更复杂的事情。就我个人而言，我最担心的是动画的速度表现，因为我在计算机上完成本地任务，主要目标是将其发布到互联网上。 –

好的是，JavaScript在每个访问者的计算机上本地运行。不太好的是，这可能意味着很老，很慢的电脑......取决于你的用户。 ;-) –

用户主要是学校和学生。我设定了一个复杂的问题，真正建立在这个基础之上。该项目是一样的。 [新问题]（http://stackoverflow.com/questions/39958781/interactive-map-with-multiple-layers-of-svg-within-html） –

为门户网站创建交互式SVG地图

回答

相关问题