Как "использовать" локальные `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