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中tried this，似乎工作正常。如果这不是您的意思，请更新您的问题。

如何使用Raphael动态更新svg？

1 个答案: