Привет, я работаю над картой svg/js, которая состоит из многих небольших графических файлов (городских округов). Я помещаю каждую графику в собственный файл, чтобы мой основной файл 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: синий прямоугольник (именно то, что я хотел)
- Chrome: Ничего
- Опера: Черный прямоугольник
Примечание. Я попробовал его с элементом изображения, но это не сработало со стилями, т.е. я получил черный прямоугольник, не синий.
Важно:. Если вы хотите ссылаться на другой SVG и, чтобы связанный SVG был частью формальной структуры документа, вы можете использовать AJAX для этого.