1

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

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

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

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

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

4

2 回答 2

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/

于 2012-09-22T20:34:07.087 回答
0

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

于 2012-09-22T19:52:48.783 回答