user1043939 user1043939 - 25 days ago 8
PHP Question

href link from svg object

I created SVG rectangle with the text "My Text" in it.
I'd like to add clickable link to text "My Text" using href attributes (or something else) to redirect site to another php file.
But, I always get only the rectangle with text "My Text" without a link.

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

At this moment (2016-11-12) browsers are not consistent on this isssue.

Certain contemporary browsers will (and should) understand 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>

Others will only understand the XML xlink:href syntax:

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

To ensure maximum cross-browser compatibility, use (for now):

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

Further Reading about XML xlink: - and its deprecation in SVG2:

See: Mozilla Developer Network: xlink:href