来自svg对象的href链接

Question

我使用文本＆＃34; My Text＆＃34;创建了SVG矩形。在里面。 我想添加可点击链接到文字＆＃34;我的文字＆＃34;使用href属性（或其他东西）将站点重定向到另一个php文件。 但是，我总是只得到带有文字的矩形＆＃34;我的文字＆＃34;没有链接。

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