web-dev-qa-db-fra.com

Les images dans les balises d'image SVG n'apparaissent pas dans Chrome, mais s'affichent localement?

Pour une raison quelconque, Chrome affiche le SVG sans les images dans ses balises d'image.

Voici un échantillon de mon SVG:

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

blocker.png est un fichier local, mais j'ai également essayé de le télécharger dans imgur, mais cela n'a pas fonctionné non plus.

Voici 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 cela ressemble localement:

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

Voici à quoi cela ressemble sur une page Web en direct:

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

Comme vous pouvez le voir, les deux joueurs manquent. Cela ne se produit pas lorsque je télécharge le SVG en ligne, mais lorsque j'essaie de lier cette URL à ma page, la même chose se produit

Je ne sais pas si c'est pertinent, mais voici le code HTML de 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>
htmlcsssvgweb
15
sgruggy

La réponse de PaulLeBeau est juste. Mais une autre solution consiste à utiliser une balise embed au lieu d'une balise img pour l'image.

<embed src="svg.svg">

ici sont quelques façons d'incorporer des images svg en HTML.

30
nisekgao

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 créer de lien vers des ressources tierces comme vous le faites en créant un lien vers les fichiers PNG. Il s'agit d'une restriction de confidentialité imposée par le navigateur.

Les solutions possibles sont:

  1. Convertissez votre PNG au format URI de données et incluez-les de cette façon dans votre SVG.

  2. Convertissez vos fichiers PNG bloqueurs en éléments SVG réels, tels qu'un <path>.

12
Paul LeBeau