Battle Canvas SVG

I might have fallen victim to the Golden Hammer. After pondering about the drag and drop of canvas elements, I realized there is an older technology that might be suitable for my purposes as well: SVG. It is just about as easy to make SVG battle canvas as it is to make one based on the canvas tag. I think SVG is a bit more promising because it provides structure and as such you would think providing drag and drop manipulation would be easier, perhaps already done.

I started to experiment by building the SVG canvas using jQuery and the jQuery SVG plugin. Static grid, hero box and transparent area effect were no problems.

Then I found out jQuery supports drag and drop in the jQuery UI. Unfortunately this didn’t work; trying to call draggable() on an SVG element gets you an exception because the code assumes HTML DOM (I think, I didn’t look too closely).

Then I decided I’d try it the same way I did with canvas. Apart from an issue trying to figure out the container’s offsets (hardcoded for now, might not be correct with other browsers but should be able to work this out), the drag and drop works. What is better about the SVG compared to the canvas tag is that I can set the mousedown handler on the area effect rectangle object itself without needing hit testing to see if I started a drag. Possibly the drag could also be done using SVG animation or by erasing and redrawing the dragged object instead of erasing and redrawing everything.

You can see the current effort at SVG Battle Canvas.

Similar Posts:

    None Found

One Comment

  1. stelt:

    The SVG world conference 2009 is in Silicon Valley.
    And the call for participation has been released.