<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Caminho SVG</title>
<style>

html {
  background-color: #DDD;
  text-align: center;
}

#fcaminho {
  width: 100%;
  border: 1px solid #000;
  font-size: 24px;
}

#aurium {
  text-decoration: none;
  float: right;
  color: #07C;
}

</style>
<body>
<svg id="svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 850 450" preserveAspectRatio="xMidYMid slice"
   width="850" height="450"
   style="width:100%; height:80%;">
  <path id="caminho"
    d="M 50,150 C 400,50 550,400 800,300 C 550,440 400,150 100,300"
    style="fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;" />
</svg>
<form>
<input type="text" name="caminho" id="fcaminho" onchange="update()" />
<a id="aurium" href="http://colivre.coop.br/Aurium/PalestraEstendendoInkscape">
  Aurium <small>- como estender o Inkscape</small>
</a>
<input type="button" value="Update" onclick="update()" />
</form>
<script type="text/javascript"><![CDATA[

var nsSVG = "http://www.w3.org/2000/svg";
var svg = document.getElementById("svg");
var path = document.getElementById("caminho");
var fcaminho = document.getElementById("fcaminho");
var dots = {};

fcaminho.value = path.getAttribute("d").replace( /([a-z])([0-9])/gi, '$1 $2' );
update()

function update () {
  removeDots();
  var c = fcaminho.value;
  path.setAttribute("d", c);
  c = c.replace( /([a-z])([0-9])/gi, '$1 $2' ).split( ' ' );
  for ( var i=0; i<c.length; i++ ) {
    if ( /[a-z]/i.test( c[i] ) ) {
      createDot(c, i);
    }
  }
}

function createDotId () {
  var i=0
  while( dots["i"+i] ){ i++ }
  return "i"+i
}

function createDot (vet, i) {
  if ( vet[i] == "M" ) {
    circle( vet[i+1], "#0B0" );
  }
  if ( vet[i] == "C" ) {
    circle( vet[i+3], "#0B0" );
    line( vet[i-1], vet[i+1], "#0AF" );
    circle( vet[i+1], "#09E", 5 );
    line( vet[i+2], vet[i+3], "#0AF" );
    circle( vet[i+2], "#09E", 5 );
  }
}

function circle (pos, color, r) {
    if ( !r ){ r=8 }
    dot = document.createElementNS( nsSVG, 'circle' );
    dot.setAttribute("r", r);
    dot.setAttribute("cx", pos.split(',')[0]);
    dot.setAttribute("cy", pos.split(',')[1]);
    dot.setAttribute("fill", color);
    svg.appendChild( dot );
    dots[createDotId()] = dot;
}
function line (pos1, pos2, color) {
    l = document.createElementNS( nsSVG, 'path' );
    l.setAttribute("d", "M"+pos1+" L "+pos2);
    l.setAttribute("fill", "none");
    l.setAttribute("stroke", color);
    svg.appendChild( l );
    dots[createDotId()] = l;
}

function removeDots () {
  try {
    for ( i in dots ) {
      if ( dots[i] ) {
        svg.removeChild( dots[i] );
        dots[i] = false;
      }
    }
  } catch(e) {
    alert(e)
  }
}

]]></script>
</body>
</html>
