Ricevi Uncaught SecurityError durante l'accesso agli oggetti SVG da Javascript

Question

Oggi ho trascorso un po 'di tempo a cercare di manipolare gli SVG con D3 (e jQuery). Il mio obiettivo è in grado di accedere/modificare SVG locali tramite JavaScript. Non importa se è su misura per la D3 ma sarebbe un punto extra.

Sembra che la soluzione che funziona per gli altri non funziona per me, che ha il seguente JavaScript:

window.onload=function() { 
    // Get the Object by ID 
    var a = document.getElementById("svgObject"); 
    // Get the SVG document inside the Object tag 
    var svgDoc = a.contentDocument; 
    // Get one of the SVG items by ID; 
    var svgItem = svgDoc.getElementById("svgItem"); 
    // Set the colour to something else 
    svgItem.setAttribute("fill", "lime"); 
}; 

con questo HTML object

<object id="svgObject" data="img/svgfile.svg" type="image/svg+xml" height="50" width="50"></object> 

e file in formato SVG separata

<svg height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"> 
    <rect id="svgItem" width="800" height="800" fill="red"></rect> 
    <circle cx="400" cy="400" r="400" fill="blue"></circle> 
</svg> 

tutti trovati here. È una versione semplificata del codice trovato in this example. Il mio codice JavaScript viene mostrato sotto, verso l'alto dal mio editore:

window.onload = function() { 
    var checkObject = document.getElementById("checkers"); 
    var checkDoc = checkObject.contentDocument; 

    var cheese = checkDoc.getElementById('layer1'); 
    console.log(cheese); 
}; 

Nel caso in cui cambia nulla, il mio script viene caricato nella parte inferiore del corpo del codice HTML. Di seguito è il mio unico elemento HTML.

e il mio file SVG (solo un controllo grigio, sentitevi liberi di usare).

<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> 
    <g id="layer1" transform="translate(0,-952.36217)"> 
     <path id="rawCheck" fill="#dbdbdb" d="m18.75,1004.5,21.607,21.607,40.893-40.893-7.8571-7.8572-33.036,33.036-13.75-14.107z" stroke-opacity="0"/> 
    </g> 
</svg> 

Il mio problema viene da chiamare .contentDocument su checkObject, che dovrebbe essere solo chiamando .contentDocument sull'elemento object ma ottengo questo pasticcio:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

tranne che era tutto colore rosso arrabbiato. Questo mi ha confuso, perché per quanto posso vedere, il mio codice è molto simile a una copia dell'esempio di lavoro, eppure eccomi qui.

Ho anche provato il d3.xml() visto in risposta this question s' e ha ricevuto il seguente errore

XMLHttpRequest cannot load file:///home/user/Documents/examples/d3/check.svg. Cross origin requests are only supported for HTTP.

così come

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///home/user/Documents/examples/d3/check.svg'

Se vuoi vedere più dettagli sul mio d3.xml() tentativo sono felice di aggiornare questa domanda, ho pensato che c'erano già molti blocchi di codice.

Answer 1

In Chrome, non è possibile accedere ai contenuti di SVG esterni tramite JavaScript quando la pagina viene aperta tramite il file system (ad esempio, l'URL ha il protocollo file://).

Per aggirare questo problema, è possibile aprirlo tramite un server locale. In alternativa, è possibile eseguire disable the Same-Origin Policy web security feature per il test utilizzando l'argomento della riga di comando --disable-web-security. Anche Firefox non ha questa limitazione, quindi c'è anche questa opzione.