Interactive SVGs in AngularJS
My latest project has been utilizing my art degree (wait, what? An art degree is useful as a software engineer? Surprisingly, YES). Using Inkscape, I created a very customized keyboard as an SVG (Scalable Vector Graphic). There were two things I had to do with this file:
- Embed the SVG into a view inside my AngularJS application.
- Each key element/node needed an attribute so when it was pressed, something would happen. Because, you know, what good is a key if you can’t click on it?
As I discovered, these two tasks are a lot harder than they should be. Putting an SVG into a view is as simple as making the file path the of an in the HTML. You can add an to the , but that only works if you want the entire SVG to be clickable. I wanted interactivity inside the SVG itself. Adding as an attribute within a node in the SVG file will NOT work! To do what I wanted, I neede to use directives to embed the SVG in the view and attach a attribute to each of my keys.
I found this site that had an interactive map and thought, “Hey, that’s kind of similar to what I want to do!” So, using their insights, I was able to make a clickable keyboard within my AngularJS application. Here’s how I did it:
Read more by clicking here.