SVG Absolute Pathing für `xlink: href` Nicht Attribut Arbeiten

Question

So eine einzige SVG-Datei Ich habe die eine Sammlung von verschiedenen Pfaden gilt:

<!-- icons.svg --> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <path id="foo" .../> 
    <path id="bar" .../> 
    ... 
</svg> 

und in meinen Webseiten, verwende ich diese SVG-Icons:

<!-- index.html --> 

<svg viewBox="0 0 256 256"> 
    <use xlink:href="icons.svg#foo"> 
</svg> 

und das funktioniert ganz gut und genau, wie ich die Absicht - wir wählen Sie die SVG mit der ID foo aus der icons.svg Datei.

Nun wenn ich versuche, das xlink:href Attribut für den <use> Tag eines _absolute_ Pfad zu meiner icons.svg Datei zu geben, es schlägt fehl und gibt nichts und scheint nicht in der Lage sein, um die Datei zu finden..

<svg viewBox="0 0 256 256"> 
    <use xlink:href="http://localhost:8080/icons.svg#foo"> 
</svg> 

Es ist wichtig, dass der absolute Pfad korrekt ist zu beachten.

Die documentation on xlink seems to suggest that absolute paths are valid values, die mich wundern, warum es hier für mich nicht funktioniert - fehle ich etwas?

Gibt es einen alternativen Ansatz, den ich in Betracht ziehen sollte? Ist das derzeit nicht der Ansatz, den ich machen möchte, um so etwas zu erreichen?

Answer 1

Sie müssen sicher sein, dass Sie Ihre externe SVG-Datei von dem gleichen Protokoll und Port laden, andernfalls werden Browser die Anfrage blockieren, gemäß der same-origin policy.

Zwei Seiten haben denselben Ursprung, wenn das Protokoll, Port (falls angegeben) und Host die gleichen für beide Seiten.

_{(betonen Mine)}