在svg路径上设置href属性

Question

我有这段代码

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="20 0 970 960" enable-background="new 20 0 970 960" xml:space="preserve">
    <g class="border">
        <path class="City1" d="......" /> 
        <path class="City2" d="......" />
        <path class="City3" d="......" />              
        <path class="City4" d="......" />           
    </g>
</svg>

我需要在每个补丁上设置一个href属性<a href="#..."></a>。 像这样

<a href="#...">
    <path class="City1" d="......" />
</a> 
<a href="#...">
    <path class="City2" d="......" />
</a>
<a href="#...">
    <path class="City3" d="......" />
</a>             
<a href="#...">
    <path class="City4" d="......" />
</a>

但不起作用。那么你们有什么建议我应该做什么？

Answer 1

对于SVG <a>元素，您需要使用xlink:href而不是href。

<a xlink:href="#..."><path class="City1" d="......" /></a>