Question

我正在使用可在此处查看的SVG：http://n1t2.info/

我只想发布SVG，但由于街道地图图层文件非常大。但是，您可以看到是否单击链接，它将地图分为18个不同的svg路径，并使用多种不同的颜色对其进行着色。我对此地图的目标是让18个不同部分中的每个部分都可以点击，或者能够为他们提供<a href="example.com">。这有可能与SVG一起使用吗？

编辑：评论建议显示我构建SVG文件的方式。你可以看到here.

的方法

Answer 1

您可以通过向每个data元素添加<path>属性，然后通过jquery或javascript处理它来轻松处理它。

首先，添加data-url="http://your-url.com"之类的内容 <path>元素。示例：<path data-url="http://your-url.com">。

在关闭</body>标记之前添加jquery库，步骤＃3中的脚本就像：

                <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
                <script>
                        //your script
                </script>
        </body>
</html>

而不是//your script您将粘贴此内容：

$(document).ready(function(){
        $('path').on('click', function(e){
            e.preventDefault();
            var url = $(this).data('url');
            console.log('Moving to:', url);
            window.open(url, '_blank');
        });
});

测试它：http://jsfiddle.net/jpvu852d/

Answer 2

IMO，最好的解决方案是SVG <a>元素。

＆＃13;

<svg width="200" height="200" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <a xlink:href="http://stackoverflow.com/questions/15532371/do-svg-docs-support-custom-data-attributes">

    <path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3"></path>

  </a>

</svg>

＆＃13;

Answer 3

谷歌搜索出现了这个jQuery插件，用于装饰图像地图，可以帮助您实现目标：

http://www.outsharked.com/imagemapster/default.aspx?what.html

有没有办法让SVG对象可点击？

3 个答案: