是否可以在 svg 元素中将锚标记包裹在 circle 元素周围?
is it possible to wrap an anchor tag around the circle element in an svg element?
我正在尝试制作一个 svg 圆 link。以下代码无效。
<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 元素,然后为每个元素添加不同的锚标记。
<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>
这可能吗?!
谢谢。
您要查找的定义 link 位置的属性在 SVG 中不是 href,它是 xlink:href。
将代码更改为
<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>
参见 jsfiddle。
这是在 svg 元素中的圆形元素周围添加锚标记的方法。
<a xlink:href="http://www.example.com" target="_blank">
<circle cx="50" cy="50" r="10" fill="red"/>
</a>
我正在尝试制作一个 svg 圆 link。以下代码无效。
<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 元素,然后为每个元素添加不同的锚标记。
<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>
这可能吗?!
谢谢。
您要查找的定义 link 位置的属性在 SVG 中不是 href,它是 xlink:href。
将代码更改为
<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>
参见 jsfiddle。
这是在 svg 元素中的圆形元素周围添加锚标记的方法。
<a xlink:href="http://www.example.com" target="_blank">
<circle cx="50" cy="50" r="10" fill="red"/>
</a>