Cette question est la même que faire un objet HTML SVG également un lien cliquable , mais les réponses données ne semblent pas travailler sur un iPhone iOS 9.3 (navigateurs Safari et Chrome). Je repousser cette question dans l'espoir que leurs nouvelles méthodes pour résoudre le problème ou une adaptation aux réponses au fonctionnement avec un iPhone.
Aussi, à l'aide d'une balise autre que le CSS html le code ci-dessus Crée ceci: Si je clique sur la zone orange (c'est l'achère) Ça fonctionne, mais si je clique sur le dessus du SVG ( Mise à jour: Mon ancrage est à l'intérieur d'un bootstrap Mise à jour 2: J'ai essayé de supprimer Bootstrap de mon projet, en cas de brouillage ou de déclaration inconnue et le problème est toujours resté. mise à jour 3: image mise à jour et ajouté tous les objets parentaux avec leur CSS. 
TABLE-Contenu Objet de classe. J'ai également mis à jour mon code HTML pour afficher des objets de parent bootstrap de mon ancrage.
3 Réponses :
Pour moi, ça marche très bien, même sur iOS!
Cependant, un peu JS / JQuery devrait faire l'affaire au cas où elle ne fonctionne pas sur certains systèmes: P>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="link.php" class="tab-svg-link"> <object type="image/svg+xml" style="visibility:visible !important" id='svg-object-1' class="tab-svg-object" data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">Your browser does not support SVGs </object> </a>
Merci pour la réponse mais j'ai toujours les mêmes résultats même lorsque j'ai ajouté votre code JavaScript. Pour clarifier, le code que j'ai travaille sur iOS sur mon MacBook mais pas sur mon iPhone 6.
Mon ancre est à l'intérieur d'un bottestrap TAB-TAB-Content objet de classe, si cela fait une différence. Je ne crois pas que cela aurait un effet sur l'ancre, mais c'est la seule différence entre le vôtre travaillant et non. - @cocoseis
L'image que vous avez partagée suggère que vos styles deviennent sur-pilon, car je peux en quelque sorte voir qu'il sort d'un conteneur du bas, malgré cela, vous avez défini sur le débordement caché ... p>
Essayez d'ajouter Clearfix à votre lien ( code> tag)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="link.php" class="tab-svg-link">
<object type="image/svg+xml" style="visibility:visible !important" id='svg-object-1' class="tab-svg-object" data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">Your browser does not support SVGs
</object>
</a>
Je suis incapable de transmettre un lien vers le site car il n'est pas encore en vie. La partie de l'image qui se chevauchait en bas était que j'ai ajouté une bordure à ce carré lors de la création de l'image (ive mise à jour de l'image). J'ai modifié mon code à ce que vous avez suggéré et cela fonctionne toujours. Je programme actuellement sur mon ordinateur Windows, mais avez-vous un lien sur la manière d'inspecter les éléments à l'aide de mon Mac et de mon iPhone, comme suggéré dans votre dernière instruction.
Ajouté Inspection des pages sur iPhone avec Safari sur Mac Section ... espère que cela aide :)
Essayez d'ajouter onclick = "" code> à l'élément code> code>. J'ai dû ajouter cela à étiquette code> pour les rendre ambulables sur iOS. <object onclick="" type="image/svg+xml" style="visibility:visible !important" id='svg-object-1' class="tab-svg-object" data="dir/my.svg">
Your browser does not support SVGs
</object>
Ajouté ce que vous avez dit et toujours ne fonctionne pas. Je vais garder cela à l'esprit pour le futur faire, merci.