Question

In an HTML page, I have three blocks: two textboxes and one inline SVG, say, containing a circle. Then I’d like to type the circle radius in one textbox, the circle position (comma-separated xy coordinates) in the other, then automatically (on keyup event with valid input) redraw the circle).

Of course my actual goal is not to draw a circle, but to figure out how I should assemble HTML + SVG + Javascript inside the HTML file so that things start to happen and I can build upon a working bare minimum.

jQuery would also be welcome, but not needed.

I searched a bit on Google and here (SO), but I couldn’t find any example, but I am sure this is relatively simple for the initiated.

As a bottomline, what I actually plan to do is to plot, inside the SVG element, a series of horizontal lines representing distances along a course (given inside text-area as “name;distance”, and diagonal lines from second text-area representing average speeds (horizontal axis being riding time) for a bicycle racing event. But that is my homework after I get kickstarted.

Answer 1

I wouldn’t recommend comma separated inputs, you’d need to do a lot of validation in order to get it right. So let’s separate the properties in three different text inputs…

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

The jQuery code is straightforward:

$('.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/