我创建了一个带有文本"My text "的SVG矩形。我想添加可点击的链接到文本"我的文本"使用href属性(或其他东西)重定向网站到另一个php文件。但是，我总是得到只有文本"My text"没有链接的矩形。
<?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>";
?>
目前(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