为web门户创建交互式SVG地图

Creating interactive SVG maps for a web portal

本文关键字：交互式 SVG 地图 创建 web      更新时间：2023-09-26

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

据我研究，有几个选项:

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

在我看来，最后这个选项最有潜力。有很多库(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库可能会有所帮助。

相关文章：