Question

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

当然我的实际目标不是绘制一个圆圈，而是想弄清楚我应该如何在HTML文件中组装HTML + SVG + Javascript以便事情开始发生，我可以建立在最低限度的基础上。

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

我在谷歌和这里（SO）搜索了一下，但我找不到任何例子，但我确信这对于发起者来说相对简单。

作为底线，我实际上打算做的是在SVG元素内部绘制一系列表示沿着路线的距离的水平线（在文本区域内给出“名称;距离”）和第二条对角线表示自行车比赛活动的平均速度（横轴是骑行时间）的文字区域。但这是我开始踢球后的作业。

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/

Answer 2

这是一组HTML SVG Mapping工具和示例。美丽的分析图表是最新添加的...... http://www.irunmywebsite.com/raphael/rapdevex.php?q=Charting

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

2 个答案: