如何使用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？

回答

相關問題