<!doctype html> <svg style="position: absolute; width: 0; height: 0"> <defs> <pattern id="rect" width="100" height="100"> <rect fill="red" width="100" height="100" /> </pattern> </defs> </svg> <div id="host"></div> <script> // Test references from a <svg:use> subtree. host.attachShadow({ mode: "open" }).innerHTML = ` <svg width="100" height="100"> <defs> <pattern id="rect" width="100" height="100"> <rect fill="red" width="100" height="100" /> </pattern> <symbol id="useme"> <pattern id="rect" width="100" height="100"> <rect fill="lime" width="100" height="100" /> </pattern> <rect fill="url(#rect)" width="100" height="100" /> </symbol> </defs> <use href="#useme" /> </svg> `; </script>