Как "использовать" локальные `defs` в SVG

У меня есть несколько изображений SVG, встроенных в одну HTML-страницу. Каждый SVG имеет собственный раздел defs, на который я ссылаюсь в моих элементах use. Похоже, я не могу определить элемент с одним и тем же идентификатором внутри нескольких defs и ссылаться на него. Второй SVG use выберет форму определения первого раздела SVG defs и проигнорирует локальное переопределение.

Кто-нибудь знает, как я могу ссылаться на раздел LOCAL defs?

Та же история в Chrome и Firefox.

См. пример ниже:

<html><head></head><body>
<svg height="50" width="50">
 <defs>
  <rect id="mybox" height="40" width="40" style="fill:#00F;"></rect>
 </defs> 
 <use xlink:href="#mybox"/>
</svg>
<svg height="50" width="50">
 <defs>
  <rect id="mybox" height="20" width="20" style="fill:#F00;"></rect>
 </defs> 
 <use xlink:href="#mybox"/>
</svg>
</body></html>

Ответы

Ответ 1

Файл SVG с несколькими идентичными идентификаторами недействителен для http://www.w3.org/TR/SVG/struct.html#IDAttribute

Ваши параметры либо делают все идентификаторы уникальными, либо перемещают SVG в отдельные файлы и ссылаются на них с помощью тегов <object> или <iframe>.