0228.md

Vector-ize me

Some SVG Shapes

• <rect>
  • Attributes: x, y, width, height
• <circle>
  • Attributes: cx, cy, r
• <ellipse>
  • Attributes: cx, cy, rx, ry
• <line>
  • Attributes: x1, y1, x2, y2

fill and stroke are attributes that can be used on most svg elements

Creating SVG elements in javascript

document.createElementNS( <NAMESPACE>, <ELEMENT> );

Creates an element from a specified XML namespace

var c1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");

Once created, you can modify it with setAttribute calls

c1.setAttribute("cx", "200");

To add the element to the svg container, use the appendChild function

var pic = document.getElementById("svg_id");
pic.appendChild(c1);

Animations with SVG and javascript

The canvas animate methods do not work on svg

setInterval( callback, time )

• Attempt to run callback every time milliseconds
• time must be >= 10, or 10 will be used anyways
• returns a unique ID for the timer (this does not change every frame)

clearInterval( id )

stops the timer identified by id