SVG <image> balise inline dans le HTML pas de chargement de l'image dans le navigateur
Essayez de charger une image en SVG à l'aide d'une page HTML:
<html>
...
<svg>
<image x="330" y="137" width="320" height="38" preserveAspectRatio="none" href="/img/title.png"></image>
</svg>
...
</html>
Tous les autres éléments du svg charger (chemins de formes de texte) à l'exception de l'image. Aucun moyen de le faire fonctionner dans les navigateurs? J'ai essayé Chrome, Firefox, IE. Tous les navigateurs sont absents de l'image.
À l'aide de Chrome, j'ai trouvé que Chrome n'a même pas d'envoyer la demande pour l'image. J'ai une intuition, c'est la même chose pour IE et Firefox.
Toutes les solutions?
OriginalL'auteur Kenneth | 2011-07-10
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser:
Voir le Document SVG Structure spec.
xlink
espace de noms déclarés sur l'élément SVG:<svg ... xmlns:xlink="http://www.w3.org/1999/xlink">
.Œuvres! merci beaucoup!
En outre, si vous êtes à la création de l'image de façon dynamique, vous devez effectuer les opérations suivantes:
svgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'title.png');
Merci beaucoup!!!! Votre commentaire sur l'utilisation de "setAttributeNS" au lieu de "setAttribute" sur l'image est si importante et il m'a aidé à résoudre ce problème après des heures et des HEURES de cogner ma tête pourquoi l'image n'était pas en train d'apparaître. Merci une tonne.
vous pouvez prendre un coup d'oeil à question s'il vous plaît
OriginalL'auteur RichieHindle