使用JavaScript更新文本框内包含的数据的内联SVG

Question

在HTML页面中，我有三个块：两个文本框和一个内联SVG，例如包含一个圆圈。然后我想在一个文本框中输入圆的半径，在另一个文本框中输入圆的位置（逗号分隔的xy坐标），然后自动（在有效输入的关键事件中）重绘圆。

当然，我的实际目标不是画一个圆，而是要弄清楚我应该如何在HTML文件中组装HTML + SVG + Javascript，以便事情开始发生，并且我可以建立在最小工作的基础上。

jQuery也会受到欢迎，但不是必需的。我搜索了一下谷歌和这里（SO），但我找不到任何例子，但我相信这对于发起者来说相对简单。

作为底线，我实际打算做的是在SVG元素内绘制一系列代表沿着路线的距离的水平线（在文本区域内给定为“名称;距离”，以及对角线从第二个文本区域代表一个自行车赛事的平均速度（横坐标为骑行时间），但这是我在开始练习之后的作业

Answer 1

我不会推荐逗号分隔输入，你需要t o做很多验证为了正确。因此，让我们的性能在三个不同的文字输入分开......

<div> 
    <label for="center_x">Center X</label> 
    <input type="text" data-attr="cx" id="center_x" value="200" class="attr_change" /> 
</div> 

<div> 
    <label for="center_y">Center Y</label> 
    <input type="text" data-attr="cy" id="center_y" value="200" class="attr_change" /> 
</div> 

<div> 
    <label for="center_y">Radius</label> 
    <input type="text" data-attr="r" id="radius" value="100" class="attr_change" /> 
</div> 

<svg xmnls="http://www.w3.org/2000/svg"> 
    <circle fill="#c00" cx="200" cy="200" r="100" id="change_this" /> 
</svg> 

jQuery的代码很简单：

$('.attr_change').on('keyup', function(){ 
    var attr = $(this).attr("data-attr"); 
    var value = parseInt($(this).val(), 10); 
    if ($.isNumeric(value)) { 
    $("#change_this").attr(attr, value); 
    } 
})​ 

http://jsfiddle.net/hzn6q/

Answer 2

这是一个HTML SVG制图工具和示例的集群 Beautiful Analytics Charts是最近添加的... http://www.irunmywebsite.com/raphael/rapdevex.php?q=Charting