web-dev-qa-db-fra.com

Tentative non sécurisée de charger l'URL svg

Je reçois une erreur dans Chrome en essayant de charger un SVG sur mon système de fichiers local:

Tentative non sécurisée de charger le fichier URL: /// C: /Users/Me/Documents/HTML/icons.svg#menu à partir du cadre avec le fichier URL: /// C: /Users/Me/Documents/HTML/master.html. Les domaines, protocoles et ports doivent correspondre.

Voici mon HTML:

<svg id="icon-menu" viewBox="0 0 70 60">
   <use xlink:href="icons.svg#menu"></use>
</svg>

et le SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 70 70">
  <g
     id="menu">
    <path
       d="m 10,15 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
    <path
       d="m 10,30 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
    <path
       d="m 10,45 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
  </g>
</svg>

J'ai cherché sur Internet, mais les seules solutions que je peux trouver sont pour le code déjà écrit en JavaScript, mais ce n'est pas le cas. Le HTML ci-dessus ne fonctionne pas dans IE, ne donnant aucune erreur, mais fonctionne sans accroc dans Firefox.

htmlgoogle-chromesvg
18
Sabumnim

Cette page a toutes les réponses, je crois:

https://css-tricks.com/svg-use-external-source/

  • Cela ne fonctionne tout simplement pas sur IE sauf si vous utilisez un polyfill.
  • Les commentaires en bas de la page décrivent le problème sur Chrome lors de l'exécution locale:

vous pouvez rencontrer des problèmes interdomaines avec cette technique lors du développement local, si vous ne développez pas avec un serveur.

6
Shikkediel

utilisez un serveur tel qu'express.js ou Apache ou nginx pour servir les fichiers que vous voulez, de préférence un sprite svg qui contient toutes vos images dont vous avez besoin afin que vous puissiez les référencer dans le modèle ou le front-end comme celui-ci

<svg style="color: red;">
    <use xlink:href="solid.svg#ad"></use>
</svg>

et à l'arrière si vous utilisez express.js dans votre fichier server.js comme ceci,

app.use(express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/sprites'));

^ référencez un répertoire statique où réside votre svg Sprite, de cette façon vous pouvez éviter les problèmes CORS. une autre façon est de définir les en-têtes en utilisant ajax qu'une autre personne au-dessus de moi a publié un lien vers css-tricks.

0
Paul Frank

Comme je l'ai écrit sur davidwells.io (sur cette page est également sa solution Javascript du problème):

J'ai eu le même problème lorsque j'ai utilisé un fichier SVG externe. J'ai dû changer la configuration du serveur virtuel et arrêter la redirection automatique des requêtes SVG de HTTP vers HTTPS. Autres mots: le fichier SVG doit être disponible sur les deux protocoles. Maintenant ça marche.

0
revoke