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

Question

在 HTML 页面中，我有三个 block :两个文本框和一个内联 SVG(例如，包含一个圆圈)。然后我想在一个文本框中输入圆半径，在另一个文本框中输入圆位置(以逗号分隔的 xy 坐标)，然后自动(在具有有效输入的 keyup 事件上)重新绘制圆。

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

jQuery 也很受欢迎，但不是必需的。

我在 Google 和此处(SO)上进行了一些搜索，但我找不到任何示例，但我确信这对于初学者来说相对简单。

作为底线，我实际上打算做的是在 SVG 元素内部绘制一系列代表沿路线距离的水平线(在文本区域内给出“名称；距离”，以及从第二个开始的对 Angular 线)文本区域代表自行车比赛的平均速度(横轴是骑行时间)。但这是我开始后的作业。

Answer 1

我不建议使用逗号分隔的输入，您需要进行大量验证才能正确。因此，让我们将属性分为三个不同的文本输入......

<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/