Viz works in blocks everywhere, in observablehq everywhere but firefox

I am trying to replicate this visualization that works for me in all of my browsers.

Copying the code in observable, I obtain the same, except that it doesn’t work on firefox.

Is this a problem related to observable?

1 Like

I think the xlink:href attribute is deprecated and firefox might therefore dropped support for it. (

A quick fix would be to replace the
.attr("xlink:href", "#textPath")

.attr("path", startingPath)

But maybe i am wrong, as the bl.ocks example works in firefox…

You need to use DOM.uid, as shown here:

Thank you all for feedback, I still don’t see it working with the trick. Am I missing something?

Did you update your notebook to use DOM.uid? It doesn’t appear so but perhaps you didn’t reshare.

Sorry, just updated it

You need to use attr("xlink:href", tPath.href), not attr("xlink:href", tPath).

that works! is there some doc about this? thank you!

Here’s the standard library README where it describes the difference between uid.href and uid.toString:

Here’s the SVG specification where it describes the difference between a normal IRI (<iri>) and a functional IRI (<funciri>):

The textPath element’s href attribute uses a normal IRI (<iri>), whereas the clip-path attribute uses the functional IRI (<funciri>).