有什么方法可以使SVG对象可单击吗

Is there any way to make an SVG object clickable?

本文关键字：单击 对象 SVG 什么 方法 可以使      更新时间：2023-09-26

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

我只想发布SVG，但由于街道地图层的原因，文件非常大。然而，如果你点击链接，你可以看到它是一个被划分为18个不同svg路径的地图，有许多不同的颜色为它们着色。我使用这张地图的目标是使18个不同部分中的每一个都可以点击，或者能够给它们一个<a href="example.com">。SVG有可能做到这一点吗？

edit：一条评论建议展示我构建SVG文件的方式。你可以在这里看到我的方法。

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

<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>

通过向每个<path>元素添加一个data属性，然后通过jquery或javascript处理，可以非常容易地处理它。

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

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

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

  3. 您将粘贴以下内容而不是//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');
        });
});

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

在谷歌上搜索发现了这个用于装饰图像地图的jQuery插件，它可能会帮助您实现目标：

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

相关文章：