Как правильно ссылаться на внешний файл svg в svg?

Привет, я работаю над картой 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 для этого.

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

Ответы

Ответ 1

Из определения в спецификации SVG, которое вы связаны с:

Селекторы CSS2 не могут применяться к (концептуально) клонированному дереву DOM потому что его содержимое не является частью формальной структуры документа.

Это означает, что ваш селектор в 1.svg не применяется к клонированному дереву DOM.

Так почему бы просто не ссылаться на таблицу стилей из another.svg? Это должно работать во всех браузерах и с <use> и <image>.

Другим вариантом является стиль элемента <use> в главном документе svg (1.svg), поскольку стиль также каскадируется до клонированного дерева.

Ответ 2

Попробуйте сделать это следующим образом:

Квадрат:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000">
    <rect x="558.5" y="570" width="5" height="5" id="rectangle" />
</svg>

Используйте его:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<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" class="blue"/>
</svg>

Ответ 3

Элемент

<svg> не имеет атрибута xlink:href, если вам нужно включить внешнее изображение, используйте элемент <image>.