来自svg对象的href链接

Question

我创建了SVG矩形，其中带有文本“我的文本”。 我想添加可点击链接到文本“我的文本”使用href属性（或其他）来重定向站点到另一个php文件。 但是，我总是只获得带有文本“我的文本”的矩形而没有链接。

<?php 
    echo "<svg width='1100' height='1620'>"; 
    echo "<rect x='450' y='30' width='200' height='30' style='fill:white stroke:black;stroke-width:2'></rect>"; 
    $my_text = "My Text"; 
    echo "<text x='473' y='51' font-family='Verdana' font-size='18' fill='black' > <a href='index.php'>$my_text</a></text>"; 
    echo "</svg>"; 
?> 

Answer 1

此刻（2016-11-12）浏览器在此不一致。

某些现代浏览器会（也应该）了解href：

<svg width="1100" height="1620"> 
<rect x="450" y="30" width="200" height="30" style="fill:white; stroke:black; stroke-width:2;"></rect> 
<text x="473" y="51" font-family="Verdana" font-size="18" fill="black" > 
<a href="index.php">My Text</a> 
</text> 
</svg> 

其他人将只能理解XML xlink:href语法：

<svg width="1100" height="1620"> 
<rect x="450" y="30" width="200" height="30" style="fill:white; stroke:black; stroke-width:2;"></rect> 
<text x="473" y="51" font-family="Verdana" font-size="18" fill="black" > 
<a xlink:href="index.php">My Text</a> 
</text> 
</svg> 

为了确保最大的跨浏览器的兼容性，使用（现在）：

<svg width="1100" height="1620"> 
<rect x="450" y="30" width="200" height="30" style="fill:white; stroke:black; stroke-width:2;"></rect> 
<text x="473" y="51" font-family="Verdana" font-size="18" fill="black" > 
<a xlink:href="index.php> 
<a href="index.php">My Text</a> 
</a> 
</text> 
</svg> 

---

进一步阅读关于XML的XLink： - 和它的折旧在SVG2：

参见：Mozilla Developer Network: xlink:href