Viz works in blocks everywhere, in observablehq everywhere but firefox

Community Help
1

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
2

I think the xlink:href attribute is deprecated and firefox might therefore dropped support for it. ( https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href)

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

with:
.attr("path", startingPath)

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

3

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

4

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

5

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

6

Sorry, just updated it

7

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

8

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

9

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>):

https://www.w3.org/TR/SVG11/linking.html#IRIforms

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

2 Likes