2013-02-07 4 views
1

Cher Stack Overflow,Accès graphiques SVG externes avec le tag USE

Je suis en train de référence graphiques individuels SVG qui résident dans différents fichiers SVG via les numéros d'étiquette et ID dans une page HTML5 maître.

Je veux être en mesure de mettre onclicks sur les étiquettes d'utilisation dans la page HTML afin de faire un questionnaire à choix multiples (et garder un score que je sais comment faire), Les graphiques vont être volumineux. Par conséquent, ceux-ci doivent être dans un fichier svg externe.

Ici cependant, j'ai utilisé un simple rectangle pour rendre ma question plus facile à suivre

Voici mon HTML

<html> 
<head></head> 

<body> 

<svg> 
<use xlink:href="LINK.svg#link" /> 
</svg> 
</body> 
</html> 

et voici mon SVG

<?xml version="1.0" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
<g id="link"> 
<rect x="0" y="0" width="50" height="50" style="fill:red"/> 
</g> 
</svg> 

Cela fonctionne exactement comme je le veux dans Firefox et Opera. Toutefois, cela ne fonctionne pas dans Chrome ou Safari. Vous ne savez pas sur Internet Explorer

Y at-il une autre méthode qui me permettra un accès externe aux données SVG et les scripts de la page HTML principale (parce que je veux peut garder un score sur plusieurs éléments SVG)

+1

https://bugs.webkit.org/show_bug.cgi?id=91237 –

Répondre

0

Vous pouvez accéder à votre fichier SVG en utilisant un tag <object>. This link vous montre comment scripter du HTML au format SVG et vice versa.

+0

Cela fonctionne dans une certaine mesure. Cependant, je veux insérer plus d'un graphique externe dans le «cadre d'image» et puis modifier les dimensions et l'emplacement du «minisvgs» pour faire une grande image. Je veux également mettre un onclick séparé, onmouseovers et css flops sur chaque 'minisvg' –

+0

Alors qu'est-ce qui vous arrête? Puisque vous utilisez une balise d'objet, vous devrez faire tous les clics onclick, onmouseover et css dans les objets svg. Y at-il un autre problème? –

Questions connexes