如何使用Raphael动态更新svg？

我想写一些东西来简化SVG路径的实验，但我有一个问题，它不会实际更新屏幕，当我可以验证svg代码更新。基本上工作流程如下：我在输入框中输入一些东西（一个路径字符串），然后点击绘制，它将清除画布，然后根据输入的路径字符串绘制形状。如何使用Raphael动态更新svg？

经过一些更多的测试后，我意识到它似乎是测试版Chrome中的一个错误。由于下面的代码似乎在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>

如果任何人有任何建议，这将是非常感谢！

杰森

来源

2010-08-29 FurtiveFelon

我想你遇到的问题是，你每次执行的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，似乎很好地工作。如果这不是你的意思，请更新你的问题。

来源

2010-08-31 17:04:35 robertc

嘿，我澄清了这个问题，希望包含更多关于我想要做的事情的信息。 – FurtiveFelon 2010-09-04 00:08:41

@FurtiveFelon好的，我想我已经链接的例子会做你想要的，除了每次都不重新创建SVG。只需取出rect元素（并可能使文本输入变大）。 – robertc 2010-09-05 14:10:38

非常感谢！它现在可以在Chrome中正常工作。结果可以在这里看到：http://svgpath.com/ – FurtiveFelon 2010-09-07 20:35:37

如何使用Raphael动态更新svg？

回答

相关问题