2015-04-07 12 views
16

sto ottenendo un errore in Chrome dal tentativo di caricare uno SVG sul mio file system locale:Unsafe tentativo di caricare URL svg

Unsafe tentativo di caricare il file URL: /// C:/Users/Me /Documents/HTML/icons.svg#menu dal frame con il file URL: /// C: /Users/Me/Documents/HTML/master.html. Domini, protocolli e porte devono corrispondere.

Ecco il mio HTML:

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

e 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> 

Ho cercato su Internet, ma le uniche soluzioni che posso trovare sono per il codice già scritto in JavaScript , ma questo non lo è. L'HTML sopra non funziona in IE, senza dare alcun errore, ma funziona senza intoppi in Firefox.

risposta

4

Questa pagina ha tutte le risposte, credo:

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

  • Semplicemente non funziona su IE a meno che non si utilizza un polyfill.
  • commenti in basso nella pagina descrivono la questione su Chrome durante l'esecuzione a livello locale:

si può incorrere in alcuni problemi tra domini con questa tecnica quando in via di sviluppo a livello locale, se non si sta sviluppando con un server.

+4

Sembra che Chrome abbia un vero problema con questo proprio ora (7/3-16). Sembra che sia un bug relativo al browser. – PatrikJarl

+0

Qual è il problema se non stai usando CodeKit? Sto usando WAMP su Windows 10 x64. – SiamKreative

+1

Forse questo argomento contiene alcune risposte aggiuntive: http://stackoverflow.com/q/8449716/3168107. – Shikkediel

0

Come ho scritto sul davidwells.io (in questa pagina è anche la sua soluzione JavaScript del problema):

Ho avuto lo stesso problema quando ho usato file in formato SVG esterno. Ho dovuto modificare la configurazione del server virtuale e interrompere il reindirizzamento automatico delle richieste SVG da HTTP a HTTPS. Altre parole: il file SVG deve essere disponibile su entrambi i protocolli. Ora funziona.

Problemi correlati