how to dynamically update svg using Raphael?

Question

Hi all,

I'm trying to write something to simplify experimentation with SVG path, but i have a problem where it doesn't actually update the screen when i can verify that the svg code is updated. Basically the work flow is as follows: I type something into the input box (A path string), and click draw, it will clear the canvas, then draw the shape according to the typed path string.

After some more testing, i realized that it seem to be a bug in beta chrome. As the following code seem to work fine in firefox. If anyone have any insights, it would be much appreciated!

Javascript:

$(function(){
  var paper = Raphael($('#paper')[0], 500, 500);
  $('#path').change(function(){
    console.log($(this).val());
    var rect = paper.rect(10, 10, 50, 50);
    console.log(rect);
    var path = paper.path($(this).val());
  });
});

HTML:

<div id="content">
  <div id="paper"></div>
  <div id="pathDiv">
    <input id="path" type="text" name="path" />
  </div>
</div>

If anyone have any suggestions, it would be much appreciated!

Jason

Answer 1

I think the problem you're experiencing is that you're writing a new path each time you execute your onchange function, whereas what you really want to do is update your existing path. To do this take the declarations for rect and path outside of your event handler function, then update the existing objects inside the funtion like this:

var paper = Raphael($('#paper')[0], 500, 500);
var rect = paper.rect(0, 0, 50, 50);
var path = paper.path("M100,25 L100,140 L50,50");

$('#path').change(function(){
  rect.attr({x: "10", y: "10"});
  path.attr("path",$(this).val());
});

I've tried this in Firefox and IE and it seems to work fine. If this isn't what you meant please update your question.