2015-04-07 12 views
16

Ich erhalte einen Fehler in Chrome zu laden von dem Versuch, eine SVG auf meinem lokalen Dateisystem zu laden:Unsafe Versuch URL svg

Unsafe Versuch URL-Datei zu laden: /// C:/Users/Me /Documents/HTML/icons.svg#menu aus dem Frame mit der URL-Datei: /// C: /Users/Me/Documents/HTML/master.html. Domains, Protokolle und Ports müssen übereinstimmen.

Hier ist mein HTML:

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

und die 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> 

ich um das Internet gesucht haben, aber die einzigen Lösungen, die ich für den Code finden können, sind bereits in JavaScript geschrieben , aber das ist nicht. Der obige HTML-Code funktioniert nicht im IE, gibt keinen Fehler, funktioniert aber ohne Probleme in Firefox.

Antwort

4

Diese Seite hat alle Antworten, ich glaube:

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

  • Es ist einfach nicht auf IE funktioniert, wenn Sie einen polyfill verwenden.
  • Kommentare auf der Seite beschreiben das Problem auf Chrome, wenn sie lokal ausgeführt wird:

Sie können mit dieser Technik in einigen domänenübergreifende Probleme stoßen, wenn sie lokal zu entwickeln, wenn Sie nicht mit einem Server zu entwickeln sind.

+4

Es sieht so aus, als hätte Chrome gerade ein echtes Problem (7/3-16). Scheint so, als wäre es ein browserbezogener Bug. – PatrikJarl

+0

Worum geht es, wenn Sie nicht mit CodeKit arbeiten? Ich verwende WAMP unter Windows 10 x64. – SiamKreative

+1

Vielleicht enthält dieses Thema einige zusätzliche Antworten: http://stackoverflow.com/q/8449716/3168107. – Shikkediel

0

Als ich auf davidwells.io schrieb (auf dieser Seite ist auch seine Javascript Lösung des Problems):

Ich hatte das gleiche Problem, wenn ich externe SVG-Datei verwendet. Ich musste die Konfiguration des virtuellen Servers ändern und die automatische Weiterleitung von SVG-Anfragen von HTTP zu HTTPS stoppen. Andere Wörter: SVG-Datei muss auf beiden Protokollen verfügbar sein. Jetzt funktioniert es.

Verwandte Themen