Bug or code problem?

Community Help
1

I made this notebook to better understand spirals, but there seems to be some inconsistencies with what I expected.

  1. On the first spiral, the circle doesn’t start moving right away; you need to move the speed nob first.
  2. The textPath isn’t directly on the path but goes over and under.

Any insights would be greatly appreciated!

1 Like
2
  1. That is odd. I added xlink to the href so the saved svg would work with Inkscape.
    image
    image718×424 34.5 KB

    And the text is correctly drawn there.
    image
    image814×716 57.7 KB

Even loading the saved SVG into the browser (without the xlink:) it displays fine.

image
image690×680 40.2 KB

Saving the SVG and loading it as a file attachment also follows the path correctly.

image
image1244×773 58.6 KB

Tested in Chrome, Firefox, Opera, vivaldi and observable doesn’t render the path right.

3

I see this is also logged in our feedback repo here: textPath doesn't stay on path, animated circle doesn't start on notebook load · Issue #101 · observablehq/feedback · GitHub
Thanks.
I sent you a suggestion with some tweaks, but it looks like the path for the text and the path for the spiral are not calculated the same way…

4

But it renders correctly if you save the bad SVG and load it in as a file attachment with no changes to the paths.

5

very strange…

6

OK, I think we found the problem. There are too many spirals on that html document :slight_smile: Seriously though that is the actual problem. You are defining multiple #spiral ids on the page (looks like 4…).

When you make them unique (#spiral1, #spiral2 etc) that should fix the problem.
A better solution would be to call DOM.uid to generate an automatically-unique name for your ids.

2 Likes
7

:sweat_smile: I was wondering about that when I was coding and then promptly forgot. Well, lesson learned! I’ll try to DOM.uid method, as I’ve never used it before. Thanks so much for your help!

2 Likes