I have an encapsulated svg with a href a attribute link inside. Unfortunately the link does not work on most mobile browsers (Safari, Firefox, ect.) I tested on iPhone, iPad, LG phone, Samsung Galaxy Tablet.
This is my code inside the HTML and inside the outer SVG:
<svg width="400px" height="400px" font-size="55px" font-family="Open Sans" font-weight="bold">
<!--LINK EMBEDDED IN SVG-->
<a href="https://www.nzz.ch" target="_blank" class="svg-link">
<text x="50%" y="50%" text-anchor="middle" fill="white">CLICKME</text>
</a>
</svg>
Full code is:
<html>
<body>
<div style="font-family:Open Sans;font-size:15px;padding:30px;position:absolute;">
Test for text clickable on mobile
</div>
<svg width="600px" height="600px" fill-opacity="0.8">
<circle r="200" cx="300" cy="300" style="fill:#11db4d;">
</circle>
<g transform="translate(100,100)">
<svg width="400px" height="400px" font-size="55px" font-family="Open Sans" font-weight="bold">
<!--LINK EMBEDDED IN SVG-->
<a href="https://www.nzz.ch" target="_blank">
<text x="50%" y="50%" text-anchor="middle" fill="white">CLICKME</text>
</a>
</svg>
</g>
</svg>
</body>
</html>Or here on jsfiddle: https://jsfiddle.net/sqhy8p15/2/ I also tried to change the z-index and padding as suggested in the answers here make an html svg object also a clickable link (on iphone) but it did not work (https://jsfiddle.net/yau5wzrf/2/).
Thanks for any help!
Instead of Attribute href use xlink:href
Also make sure that the xlink namespace is delcared on your SVG element.