SVG: <use href> does not render all svg elements

Description:
Using <use href="..."/> to reference an external svg within an svg sometimes results in an incomplete rendering.

Reproduction steps:

1. Download azure sample svgs from (http://Azure%20Architecute Icons)

2. Host a simple index.htm referencing the VM svg icon

<html>
<body>
<svg>
<use href="10021-icon-service-Virtual-Machine.svg#fd454f1c-5506-44b8-874e-8814b8b2f70b"/>
</svg>
</body>
</html>

3. Browse the page

Expected:
Icon is fully displayed. Works on firefox f.e.

Actual:
In Edge (and Chrome) only the polygon part is rendered.

Not using <use> to display the svg image works fine.

Any help or a workaround hint would be appreciated.

Thanks in advance and best regards

Thomas

Forum Discussion