ствуйте, я работаю над картой svg / js, которая состоит из множества маленьких графиков svg (Городские районы). Я помещаю каждую графику в отдельный файл, чтобы мой основной файл SVG по-прежнему можно было поддерживать и не раздутым.

Как я могу сослаться на внешний файл SVG от другого SVG правильно?

Ожидаемый результат: Откройте 1.svg в браузере и увидите синий прямоугольник. Как это должно работать:w3c: использовать элемент

Вот что я попробовал: 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; }

Результат:

Firefox: синий прямоугольник (именно то, что я хотел)Хром:НичегоOpera:черный прямоугольник

Примечание: я попробовал это с элементом изображения, но это не сработало с таблицами стилей, т.е. я получил черный прямоугольник, а не синий.

Важный: Когда вы хотите сослаться на другой SVGа также Если вы хотите, чтобы SVG-ссылка была частью официальной структуры документа, вы можетеиспользовать AJAX сделать это.

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