Comment utiliser les images SVG de manière interchangeable avec les fichiers PNG dans Firefox?

Question

Mon projet prend en charge les utilisateurs qui téléchargent leurs propres icônes à utiliser pour diverses entités du système. Je voudrais prendre en charge les SVG, car cela signifie que la même image peut être mise à l'échelle et donc utilisée à plusieurs endroits.

Firefox a un bug actuel qui empêche les fichiers SVG d'être utilisés dans les balises <img>. D'après mes autres travaux sur xhtml, les balises <object> étaient la solution (xhtml) pour les supports externes (et le support des fonctions de secours amélioré essentiellement équivalent), et comme Firefox prend en charge SVG dans les balises d'objet, je suis passé à l'utilisation celles-ci. Cependant, il semble que les «caractéristiques» de SVG les empêchent d'être utilisées de manière interchangeable car les images évolutives ne semblent pas sortir de l'objet, entre autres choses.

Est-ce que quelqu'un sait si ces problèmes peuvent être résolus? C'est à dire. comment puis-je dire à Firefox que je veux juste l'image en utilisant l'étiquette de l'objet?

Answer 1

Je ne sais pas si cela se qualifie comme de la triche, mais je l'ai mis l'étiquette d'objet à « z-index: -1 » et la div contenant à « position: relatif »(pour créer un nouveau contexte de positionnement sans modifier la mise en page). Dans ce cas, j'ai ajouté un autre div en position absolue avec hauteur et largeur réglées à 100%; cela se trouve effectivement au-dessus de l'étiquette d'objet (et sans aller derrière le conteneur en raison du contexte de positionnement), le résultat net étant que les événements de souris sont capturés par la div overlay et barbotés dans le nœud du conteneur. Le bonus div pourrait être ajouté par jQuery, mais par souci de simplicité je l'ai juste coincé côté serveur quand la page est composée.

Answer 2

Peut-être que vous pouvez utiliser un DIV de la bonne taille et définir background-image dessus.

Modifier: cela ne semble pas fonctionner, bien que je ne sache pas pourquoi.

Answer 3

L'élément objet "encapsule" l'objet conteneur, c'est-à-dire que les deux DOM sont complètement séparés. Par conséquent, les événements ne peuvent pas passer du DOM SVG au DOM HTML contenant.

Cependant, l'utilisation de JavaScript et AJAX, il vous suffit de charger le fichier SVG (car il est XML) et le mettre directement dans les DOM (vous pourriez avoir à régler une certaine largeur/hauteur quelque part):

En utilisant jQuery, le code est quelque chose le long de cette:

$.get('icon.svg', function (svg) { 
    $('#put_svg_here').append(svg.rootElement); 
}, 'xml');