This is a difference in interpretation of the SVG spec across browsers, and can be fixed by changing the embedded SVG.
Code in Observable is evaluated in a sandboxed iframe for security that lives on a separate domain, such as:
In order to make relative links work, the document’s base URL is set to the notebook URL, such as:
Unfortunately, in some browsers this affects the interpretation of SVG IRIs, the identifiers that are used within SVGs to refer to things like gradients, patterns, and reusable content. In these browsers, relative IRIs (such as
#foo) don’t work on a page with a different document base URL because the SVG itself is interpreted as being on the original URL, while the IRI is interpreted as relative to the base URL.
Even if this browser inconsistency did not exist, the other problem (fundamental to the design of SVG) is that ids are global to the page, and thus when you import SVG content from another notebook, you can easily get namespace collisions.
This is why DOM.uid is in Observable’s standard library.
See this notebook for an example:
You can also use
window.location to convert a relative IRI to an absolute IRI, but DOM.uid is still preferred because it will avoid namespace collisions when importing.