Je construis un site web interactif pour un écran tactile, qui exécute la dernière version de Google Chrome. L'utilisateur doit exploiter, dans ce cas, une série de bâtiments pour obtenir plus d'informations à ce sujet. L'idée est de placer les hyperliens en position absolue et de les placer au-dessus des bâtiments, qui sont combinés en une seule image de fond. Mais comme vous pouvez le voir ci-dessous, le problème est que certains hyperliens se chevauchent. La chance que l'utilisateur tape sur le mauvais bâtiment sans le savoir, est assez grande. Comme j'ai déjà les masques vectoriels de chaque bâtiment, j'ai pensé que ce serait une bonne idée de ne pas utiliser les hyperliens, mais d'utiliser des fichiers SVG à la place. Les fichiers SVG prennent en charge une balise appelée xlink, que vous pouvez utiliser pour rendre un objet vectoriel lisible. La zone cliquable qui lie à un autre fichier n'est plus un carré, mais a la même forme que le masque vectoriel. Donc, tout comme je l'ai fait avec les hyperliens, je les ai placés au sommet des bâtiments. Cela fonctionne très bien dans Firefox, mais pas dans Chrome ni Safari! Apparemment, il y a un bug dans Webkit (bugs.webkit.org/show_bug.cgi?id=22986) qui amène le navigateur à toujours afficher un fond blanc et qui néglige la forme de l'objet vectoriel, donc il est rendu comme un objet carré.SVG embed bug dans Safari me force à chercher une autre option
Screenshot: Overlapping hyperlinks and Webkti SVG Bug
Normalement, l'opacité du embed SVG serait mis à zéro, mais pour vous montrer ce qui ne va pas, je l'ai mis à 1.
Utiliser Firefox est plutôt pas une option . Et l'étiquette de zone en HTML prend trop de temps. Donc je suis coincé. Est-ce que quelqu'un sait une autre solution pour ce problème particulier?
Le problème se produit-il avec le fichier 1 svg ou fais-le vous faites un fichier svg pour chaque bâtiment? Pourriez-vous faire un fichier svg couvrant toute la page. Pouvez-vous intégrer les images dans le fichier svg? Pourriez-vous intégrer le svg dans le HTML (pas comme un fichier externe)? – SiggyF
Merci DiggyF pour votre réponse, mais je viens de trouver la solution à mon problème. Il semble qu'Illustrator a ajouté une balise nommée clipPath à la structure XML du fichier SVG. Cela a entraîné la forme de xlink en tant que rectangle dans Webkit, et non pas comme le chemin que je voulais qu'il soit. Cela ne résout pas le bug de fond blanc dans Webkit, mais ce n'est pas un problème de toute façon, car je mets à zéro l'opacité du SVG. Merci quand même! – Senne