Hola, estoy trabajando en un mapa svg / js, que consta de muchos pequeños gráficos svg (distritos de la ciudad). Puse cada gráfico en un archivo propio para que mi archivo svg principal aún se pueda mantener y no se hinche.

¿Cómo puedo hacer referencia a un archivo svg externo de otro svg correctamente?

Resultado esperado: Abra 1.svg en un navegador y vea un rectángulo azul. Cómo debería funcionar: w3c: use el elemento

Así que esto es lo que probé: 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: un rectángulo azul (exactamente lo que quería)Cromo:NadOpera:Negr rectángulo

Nota: Lo intenté con el elemento de imagen, pero eso no funcionó con las hojas de estilo, es decir, obtuve un rectángulo negro, no uno azul.

Importante Cuando desee hacer referencia a otro SVG desea que el SVG referenciado forme parte de la estructura formal del documento, puedeuse AJAX Para hacer eso

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