У меня есть инкапсулированный svg с ссылкой на атрибут href. К сожалению, ссылка не работает в большинстве мобильных браузеров (Safari, Firefox и т. Д.), Которые я тестировал на iPhone, iPad, телефоне LG, планшете Samsung Galaxy.
Это мой код внутри HTML и внутри внешнего 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>
Полный код:
<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>
Или здесь, на jsfiddle: https://jsfiddle.net/sqhy8p15/2/ Я также попытался изменить z-index и padding, как предложено в ответах здесь сделать объект html svg также интерактивной ссылкой (на iphone) но это не сработало (https://jsfiddle.net/yau5wzrf/2/).
Спасибо за любую помощь!