Les Images en SVG balises d'Image ne s'affiche pas dans google Chrome, mais affiche localement?

Pour une raison quelconque, Chrome affiche le format SVG, sans les images dans sa balises d'Image.

Voici un exemple de partir de mon fichier SVG: 

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

bloquant.le png est un fichier local, mais j'ai aussi essayé de le télécharger à imgur, mais cela ne fonctionne pas non plus.

Ici est la balise svg:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Voici à quoi il ressemble localement:

http://i.imgur.com/BDP8KpG.png

Voici à quoi il ressemble sur un site web:

http://i.imgur.com/KVuxLI1.png

Comme vous pouvez le voir, les deux joueurs sont absents. Cela n'arrive pas quand je télécharge le SVG en ligne, mais lorsque je tente de lien URL de ma page, la même chose se produit

Ne sais pas si c'est pertinent, mais ici, c'est le code HTML pour la page:

<!DOCTYPE HTML>
<html>
<head>
<title>SVG</title> 
<style>
img{
    width: 100%;
    height:auto;
    max-width: 800px;
}
</style>
</head>

<body>

<div>
    <img src="svg.svg"/>
</div>

</body>
</html>
  • Avez-vous assurez-vous de modifier le chemin d'accès de l' <image> balise afin de refléter les changements? I. e. changement blocker.png à http://imgur.com/you/ABCDEF, quel que soit le lien est
  • Oui, j'ai fait en sorte que j'ai fait. Je l'ai chargé localement, il a montré jusqu'à. Chargé sur ma page web, il n'a pas.
InformationsquelleAutor sgruggy | 2016-12-17
  1. 28

    PaulLeBeau la réponse est juste. Mais une autre solution est d'utiliser un embed tag à la place d'un img balise de l'image.

    <embed src="svg.svg">

    Ici sont quelques façons d'intégrer des images svg dans du code HTML.

    InformationsquelleAutor nisekgao
  2. 12

    Lorsque vous chargez un SVG dans une page web à l'aide d'un <img> élément, le SVG doit être autonome. Il ne peut pas lier à une tierce partie à des ressources comme vous le faites par un lien vers les fichiers PNG. Cette vie privée d'une restriction imposée par le navigateur.

    Les solutions possibles sont:

    1. Convertir vos PNG de Données de format d'URI et de les inclure dans votre SVG de cette façon.

    2. Convertir votre bloqueur PNG(s) de réels éléments SVG, comme un <path>.

    • Pourquoi serait-il travailler localement si?
    • Si c'était vrai, ça ne fonctionne pas non plus quand je le télécharge en ligne image de l'hébergement de sites web, ce qu'elle fit.
    • Affichage du SVG dans votre navigateur (ie. le .svg fichier) est bien, parce que vous n'êtes pas le charger via un <img>. La même chose s'applique si votre site d'hébergement d'images d'hôtes et sert le .svg fichier directement, plutôt que de l'intégrer via un <img>.
    InformationsquelleAutor Paul LeBeau
  3. -1

    Il m'est arrivé de trouver que le Chrome [v 58.0.3029.81 (64-bit)] ne pas afficher l'image à l'intérieur de svg si le fichier image n'est pas situé au html répertoire racine.
    L' .svg et de l'embarqué .les fichiers png ont été placés dans /dossier images, la .contenu svg est venu droit dans google Chrome, mais pas de l'embarqué .png. Lorsque l' .png a été copié (../) le code html de la racine, Chrome fonctionne.

    Cependant, Firefox [v 52.0.2 (32-bit)] semble bien fonctionner quand .svg et .png sont dans le même dossier /images.

    Edit: en Fait dans mon cas, je charge le format svg avec d3.xml(..) méthode pour obtenir js poignée de la réelle éléments svg.

    InformationsquelleAutor mpeli