3

I don't know how to use Snap.svg with Angular v4.0, so I read this post. I tried the solution of @moeabdol (npm install ..., scripts: ..., declare ..., s.circle(...)), but I get the following error:

ERROR TypeError: s.circle is not a function

However, I can load an external SVG with Snap.load(...).

Why is s.circle not working for me?

honk
  • 9,137
  • 11
  • 75
  • 83
Julien Becker
  • 33
  • 6
  • What is 's' here, has it been defined anywhere ? – Ian Aug 05 '18 at 21:41
  • 's' is : const s = Snap('#my-svg'); you can read the code by reading the linked post. – Julien Becker Aug 09 '18 at 14:39
  • Maybe you need to include more of your code rather than seeing the linked code. – Ian Aug 10 '18 at 06:22
  • Sorry @Ian to not include more of my code. I tried, but I had a lot of problem with stackoverflow which refused the format of my post. I'm novice, I didn't know how my post could be ok so I removed the code. – Julien Becker Sep 15 '18 at 11:34

1 Answers1

5

Make sure that you draw on a svg and not a div. I made this mistake too.

In your HTML: <svg id="editor-canvas"></svg>

In your component: const s = Snap("#editor-canvas"); const c = s.circle(100, 100, 100);

Sadzeih
  • 146
  • 1
  • 2
  • 8
  • Thank you for your answer Sadzeih. With svg and not div it's work fine ! – Julien Becker Sep 14 '18 at 08:46
  • This works in Quasar/Vue as well. Need to put this inside `mounted` function instead of `created` otherwise the same error is given ` "TypeError: Cannot read property 'circle' of null"` – A.W. Apr 07 '20 at 16:13