是否可以在 svg 元素中的圆形元素周围包裹锚标记？答案

【问题标题】：is it possible to wrap an anchor tag around the circle element in an svg element?是否可以在 svg 元素中的圆形元素周围包裹锚标记？
【发布时间】：2015-08-05 05:37:52
【问题描述】：

我正在尝试将 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/ 生成的文档中有以下代码。我想使用它们的数据索引属性来定位每个圆形元素，然后为每个元素添加不同的锚标记。

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

这可能吗？！

谢谢。

【问题讨论】：

标签： javascript jquery html svg jvectormap

【解决方案1】：

见jsfiddle。

这是您可以在 svg 元素中围绕圆形元素添加锚标记的方法。

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

【讨论】：

【解决方案2】：

您要查找的定义链接位置的属性不是 SVG 中的 href 它是 xlink:href。

【讨论】：

【解决方案3】：

把代码改成

<svg style="width:100%; height:100%">
    <g><a xlink:href="http://www.example.com" target="_blank">
        <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></a><a xlink:href="http://www.example.com" target="_blank"><circle data-index="1" cx="80.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></a><a xlink:href="http://www.example.com" target="_blank"><circle data-index="2" cx="90.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></a><a xlink:href="http://www.example.com" target="_blank"><circle data-index="3" cx="100.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></a>

    </g>

【讨论】：