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

Question

我必须创建一个可以在桌面、Ipad 和 android 上运行的在线停车系统。我有一个 .svg 格式的停车场地图。

我的问题是：我如何将该地图呈现到浏览器中并在每个插槽点击时执行 javascript 任务。

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

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

谢谢

Answer 1

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

我在最近的一个项目中做了这个，它就像一个魅力。

在 Web 上使用 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 处理，也不能附加任何你想要的节点属性——只支持少数几个。

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

Answer 2

这是一个关于如何向 SVG 图形添加事件处理的教程