html - code - Cómo `usar ''local` defs` en SVG

svg use external file (2)

Creé una herramienta para aleatorizar identificadores de definición para evitar este problema con svg en línea haciendo referencia al mismo #id, con suerte será útil para otra persona. http://hugozap.com/randomize_svg_def_ids.html

Tengo varias imágenes SVG incrustadas en una sola página HTML. Cada SVG tiene una sección propia de defs que me refiero en mis elementos de use . Parece que no puedo definir un elemento con la misma ID dentro de múltiples defs y hacer referencia a él. El segundo use SVG elegirá la definición de la primera sección de defs SVG e ignorará la redefinición local.

¿Alguien sabe cómo puedo hacer referencia a la sección de defs LOCAL?

La misma historia en Chrome y Firefox.

Vea el ejemplo a continuación:
<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>

Un archivo SVG con múltiples identificadores idénticos no es válido según http://www.w3.org/TR/SVG/struct.html#IDAttribute

Sus opciones son hacer que todos los ID sean únicos o mover el SVG a archivos separados y hacer referencia a ellos a través de etiquetas <object> o <iframe> .