如何使用Raphael动态更新svg？

Question

我正在尝试编写一些内容来简化SVG路径的实验,但是我有一个问题,即当我可以验证svg代码是否更新时它实际上不会更新屏幕.基本上工作流程如下:我在输入框中键入内容(路径字符串),然后单击绘图,它将清除画布,然后根据键入的路径字符串绘制形状.

经过一些更多的测试,我意识到它似乎是beta版的一个bug.由于以下代码似乎在Firefox中运行良好.如果有人有任何见解,将不胜感激!

使用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>

如果有人有任何建议,将不胜感激!

贾森

Answer 1

我认为您遇到的问题是每次执行onchange函数时都在编写新路径,而您真正想要做的是更新现有路径.要执行此操作,请在事件处理函数之前rect和path之外执行声明,然后更新函数内的现有对象,如下所示:

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());
});

我在Firefox和IE中尝试了这个,它似乎工作正常.如果这不是您的意思,请更新您的问题.