javascript - 是否可以在 svg 元素中将 anchor 标记包裹在 circle 元素周围?

标签 javascript jquery html svg jvectormap

我正在尝试将 svg 圆圈设为链接。以下代码无效。

<svg height="100" width="100">
    <g>
        <a href="http://www.example.com" target="_blank">
            <circle cx="50" cy="50" r="10" fill="red"/>
        </a>
        <circle cx="80" cy="50" r="10" fill="red"/>
    </g>
</svg>

为了更进一步,我在 JVectorMap 生成的文档中包含以下代码 http://jvectormap.com/ .我想使用它们的 data-index 属性定位每个 circle 元素,然后为每个元素添加不同的 anchor 标记。

<svg>
        <g>

            <circle data-index="0" cx="70.73386383731211" cy="105.63678160919538" fill="yellow" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>

            <circle data-index="1" cx="141.46772767462423" cy="176.3706454465075" fill="yellow" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>

            <circle data-index="2" cx="353.6693191865606" cy="388.57223695844385" fill="deeppink" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>

            <circle data-index="3" cx="212.20159151193636" cy="176.3706454465075" fill="green" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>

        </g>
</svg>

这可能吗?!

谢谢。

最佳答案

参见 jsfiddle .

这就是如何在 svg 元素中的 circle 元素周围添加 anchor 标记。

    <a xlink:href="http://www.example.com" target="_blank">
        <circle cx="50" cy="50" r="10" fill="red"/>
    </a>

关于javascript - 是否可以在 svg 元素中将 anchor 标记包裹在 circle 元素周围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30409542/

相关文章:

javascript - 我如何知道哪个 anchor 标记被点击?

jquery - 图片轮播中每张图片上的文字

php - 加载前页面上出现 Stray "-->"

javascript - 将 Jquery 列表值分配给文本按钮

html - 如何在不使用表格、Flexbox 或网格系统的情况下制作网格

javascript - lint 严格违反使用 (this)

javascript - console.log (javascript) 中 %o 和 %O 的区别

javascript - 是否可以根据条件对齐 div?

javascript - 使用javascript在浏览器中显示数组中的一行随机图片

javascript - 根据数据点的数量更改 d3 可重复使用的圆环图中的颜色范围