Comment insérer un objet SVG en HTML avec des liens?

Je ne veux pas ajouter un lien vers un svg (ce qui n'est pas possible parce que le svg n'est pas fourni par moi), mais je veux ajouter un lien comme <a href=""><img src="foo.svg"/></a>. Seulement que cette fois ce n'est pas un img, mais un object (donc je peux inclure un svg).Comment insérer un objet SVG en HTML avec des liens?

Fonctionne avec certains navigateurs, mais pas avec firefox par exemple. Quelle est l'idée par défaut comment faire quelque chose comme ça?

Source

2010-01-18 user253104

Dans Firefox <object> capture tous les clics et ne les laisse pas "bulle" hors du document SVG. Une solution de contournement raisonnable consiste à couvrir le SVG avec un autre élément qui obtient le clic en premier.

Heureusement, cela peut être fait avec CSS pur:

a {position:relative; display:inline-block;} 
a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;}

Vous pouvez ajouter :-moz-any-link pseudo-classe au sélecteur pour le rendre Gecko seule.

Source

2010-01-19 19:57:32 Kornel

Mettre le lien à l'intérieur du lieu fichier svg, par exemple:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<a xlink:href=""> 
    ... 
</a> 
</svg>

Source

2010-01-19 12:07:46

... et si le fichier est hébergé sur le même domaine, et que vous voulez vraiment éviter de changer le fichier que vous pouvez essayer sur le serveur quelque chose comme ceci: var AELM = yourObjectElm.contentDocument.documentElement.createElementNS (» http://www.w3.org/2000/svg "," a "); aElm.href.baseVal = "http://votre.link.here.com"; // ... ajoute tous les enfants de yourObjectElm.contentDocument.documentElement à aElm ... // yourObjectElm.contentDocument.documentElement.appendChild (aElm); –

Javascript n'est pas possible et je ne peux pas modifier le fichier – user253104

Avec svgweb vous pouvez intégrer SVG cross-browser arbitraire, et le modifier par des méthodes DOM régulières. Cela inclut d'attacher des écouteurs d'événement à n'importe quelle partie du fichier SVG.

svgweb page d'accueil:
http://code.google.com/p/svgweb/

svgweb QuickStart (discute également d'ajouter des écouteurs d'événements):
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

Même si vous ne pouvez pas le mettre dans une balise d'ancrage traditionnel de cette façon (I N'avez pas essayé, cela pourrait fonctionner), vous serez au moins capable de gérer les événements de clic et de naviguer en fonction d'eux, ce qui est vraiment ce que vous recherchez.

Source

2010-01-19 19:49:09

Javascript n'est pas possible – user253104

Comment insérer un objet SVG en HTML avec des liens?

Répondre

Questions connexes