lá, eu estou trabalhando em um mapa svg / js, que consiste em muitos pequenos gráficos svg (distritos da cidade). Coloquei todos os gráficos em um arquivo para que meu arquivo svg principal ainda possa ser mantido e não fique inchad

Como posso referenciar um arquivo svg externo de outro svg corretament

Resultado esperado: abra 1.svg em um navegador e veja um retângulo azul. Como deve funcionar: w3c: use o elemento

Então é isso que eu tentei: 1.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-       20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000">
<use xlink:href="another.svg#rectangle"/>
</svg>

another.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-       20010904/DTD/svg10.dtd">
<svg id="rectangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000">
<rect class="blue" x="558.5" y="570" width="5" height="5" />
</svg>

style.css

.blue { fill: blue; }

Resultado

Firefox: Um retângulo azul (exatamente o que eu queria)Cromada:NadOpera:Pret retângul

ota: Tentei com o elemento de imagem, mas isso não funcionou com as folhas de estilo, ou seja, recebi um retângulo preto e não azu

Importante Quando você quiser fazer referência a outro SVG deseja que o SVG referenciado faça parte da estrutura formal do documento, você podeuse AJAX fazer isso

https: //bugs.webkit.org/show_bug.cgi? id = 12499