javascript - 将map.svg绘制到浏览器并在每个区域单击执行任务

Question

我必须创建一个可以在桌面、Ipad 和 Android 上运行的在线 parking 系统。我有一个 .svg 格式的 parking 区 map 。

我的问题是:如何将该 map 渲染到浏览器中并在每次插槽点击时执行 JavaScript 任务。

我正在使用 asp.net 开发该项目。目前我正在尝试将 .svg 转换为 Canvas 。

我对这种图形化的东西很陌生，并且坚持了一段时间。请帮助我找到更好的方法，或者为我们提供此方法的示例链接。

谢谢

Answer 1

SVG 中的元素也是 DOM 的成员(如果这样插入的话)，因此使用 jQuery 或 document.querySelector() 之类的东西选择它们是没问题。但是，并非所有浏览器 (< IE9) 都可以处理原始格式的 SVG(这会禁用这种无缝 JavaScript 集成)。

我在最近的一个项目中做到了这一点，而且效果非常好。

在网络上使用 SVG 时需要考虑的一些事情首先是 SVG 的大小。大文件往往会减慢一切，尤其是在应用 JavaScript 操作和事件时。此外，请尽可能保持 SVG 文件干净。某些 SVG 软件会插入“XML 噪声”节点，这对于渲染来说不是必需的，并且会禁止将原始格式插入到 DOM 中。

要将 SVG 集成到 DOM，您应该做的是将 SVG 文件的内容加载到当前的 DOM 节点。我使用 JavaScript 完成了此操作，但该方法对于输出来说应该不重要。

示例；

...
   <div class="svg-node" data-svg-file="/images/file.svg"></div>
...

并使用 jQuery 加载它们并附加事件处理程序；

$(document).ready(function () {

    var svgFile = $('.svg-node').attr('data-svg-file');

    $.ajax({
        'url': svgFile,
        'type': 'get',
        'dataType': 'text',
        'success': function (svgContent) {

            $('.svg-node').html(svgContent);
            $('.svg-node #an-elements-id').on('click', handleEvent);

        }
    });

});

不幸的是，大多数网络浏览器在使用这种方法时都存在一些问题。 SVG 组无法通过 DOM 进行处理，并且您无法附加任何您想要的节点属性——仅支持少数几个。

但总而言之，这是一个直接且简单的实现，并且适用于大多数浏览器。