ManfredSteiner / ngx-svg

ngx-svg

Tutorial see: https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

In this tutorial it is shown how you can incorporate SVG and 2D Canvas graphics into Angular applications, and how you can avoid potential problems along the way. It will also show how to add motion to SVG and Canvas graphics by animating them.

Prerequisites

• Node.js
• Angular CLI
• Visual Code

Branches

Use command git checkout <branch> to get one of the following branches:

• master

  • New ng project after ng init ngx-svg

• step1-simple-svg-component

  • Angular component for SVG element with simple intercation
  • Tutorial: Namespacing SVG Elements
  • Tutorial: Using Attribute Binding Instead of Property Binding

• step2-element-selector

  • Tutorial: Avoiding Element Selectors For Components

• step3-css-animation

  • Tutorial: CSS Transitions And Animations

• step4-greensock
  Important: npm module gsap is needed, so don't forget to call npm install!

  • Tutorial: Greensock