Question

我必须创建一个适用于桌面，Ipad和Android的在线停车系统。我有停车场的.svg格式地图。

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

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

我是这个图形内容的新手并坚持了一段时间。请以更好的方式帮助我，或者为我们提供这种方法的示例链接。

由于

Answer 1

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

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

在网络上使用SVG时要考虑的一些事项首先是SVG的大小。大文件往往会减慢所有内容，特别是在应用JavaScript操作和事件时。此外，保持您的SVG文件尽可能干净。一些SVG软件插入“XML noise”节点，这对于渲染不是必需的，并且禁止将原始格式插入到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);

        }
    });

});

不幸的是，大多数Web浏览器在使用此方法时遇到一些问题。无法通过DOM处理SVG组，也无法附加您希望的任何节点属性 - 只支持少数几个。

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

Answer 2

这是关于如何向SVG图形添加事件处理的tutorial

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

2 个答案: