SVGPath

A declarative way to deal with SVG paths.

by John Schulz

HTML

<h2>SVG ref</h2>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50 A30,30 0 0,1 35,20 L100,100 M110,110 L100,0" style="stroke:#660000; fill:none;"/>    
</svg>

<h2>SVGPath</h2>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path style="stroke:#660000; fill:none;"/>    
</svg>

CSS

svg, canvas { 
    width: 200px; height: 200px; 
    outline: 1px dashed #ccc;
}

JavaScript

/*
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50
             A30,30 0 0,1 35,20
             L100,100
             M110,110
             L100,0"
          style="stroke:#660000; fill:none;"/>    
</svg>
*/

/* Canvas API
Return    Name
void    beginPath()
void    closePath()
void    fill()
void    stroke()
void    clip()
void    moveTo(float x, float y)
void    lineTo(float x, float y)
void    quadraticCurveTo(float cpx, float cpy, float x, float y)
void    bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y)
void    arcTo(float x1, float y1, float x2, float y2, float radius)
void    arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise)
void    rect(float x, float y, float w, float h)
boolean    isPointInPath(float x, float y)
*/

function SVGPath() {

    this.beginPath();

    return this;
}

SVGPath.prototype = {
    toString: function() {
        return this.path.join(' ');
    },
    valueOf: function() {
        return this.path.join(' ');
    },
    beginPath: function() {
        this.path = [];
        console.log('path started');
        return this;
    },
    closePath: function() {
        this.path.closed = true;
        return this.path.toString();
    },
    fill: function() {},
    stroke: function() {},
    clip: function() {},
    moveTo: function(x, y) {
        this.path.push('M' + x + ',' + y);
        return this;
    },
    lineTo: function(x, y) {
        this.path.push('L' + x + ',' + y);
        return this;
    },
    quadraticCurveTo: function(cpx, cpy, x, y) {
        return this;
    },
    bezierCurveTo: function(cp1x, cp1x, cp2x, cp2y, x, y) {
        return this;
    },
    arcTo: function(x1, y1, x2, y2, radius) {
        this.path.push('A' + x1 + ',' + y1 +
                       ' 0 0,1 ' +
                       x2 +','+ y2 );
        return this;
    },
    arc: function(x, y, radius, start_angle,...