0

I have the following code inside Svelte REPL:

https://svelte.dev/repl/b96c96bb3a654f5a81813525d22a8820?version=3.29.0

There's a problem: the chessboard doesn't appear, or at a better case (without onMount) flashes while appearing, and then disappears...

What's wrong in this code and how to fix that ?

Hefeust CORTES
  • 129
  • 13

1 Answers1

1

I think the problem for you is coming from how you're attempting to push cells to defs. When you replace defs.push(cells) on line 36 with defs = [...defs, cells] it allows the columns and rows to be created properly. Then for some reason you're setting xmlns through a variable... this is the main thing preventing anything from showing up. There is no reason to use a variable to set xmlns, pretty sure it's preventing the SVG from being created properly when done this way and you don't actually need xmlns for inline SVGs, so you can trash that and all works well as shown here.

However, unless you're planning on using the empty space inside the 1000 x 1000 SVG area then I'd advise you to cut it down to 800 x 800 so the squares fit into the overall dimensions better.

JHeth
  • 7,067
  • 2
  • 23
  • 34
  • 1. defs = [...defs, cell] is better for reactivity... 2. xmlns in a variable # silly thing from me to 'save' space and avoid long lining in code (argh) 3. size of board : I need to keep some room to cols and rows labels... I will correct the REPL sooner. You're right @JHeth ! +1 Thanks a lot. – Hefeust CORTES Oct 13 '20 at 23:21
  • The xmlns declaration is definitely not needed for inline SVG check this [answer](https://stackoverflow.com/a/18468348/7657915) from a guy who wrote most of the SVG code for Firefox. But I definitely understand trying to prevent long lines in markup with Svelte, I do the same lol. – JHeth Oct 13 '20 at 23:27