Skip to content

Understanding SVG arc paths

Mon 9th July 2012

A side-project that I am working on at the moment involves an interface that is made up of interactive SVG. On Saturday it was time to tackle a piece of code that renders a curvy line using the SVG <path> tag. I was modifying some existing code, which I essentially must have fluked how to do it, as I don’t really remember how it works! It uses the arc line-type, which has a number of slightly obscurely named parameters. At first I was going to write a bit of PHP to let me change these parameters, see how they vary and also render the co-ordinates as circles on the diagram, for reference.

Then I realised that I’ve just learned the skills to manipulate and interact with SVG in JavaScript, so I might as well make an interactive demo to allow me to manipulate the parameters on the diagram and gain a better understanding for them.

Here it is: Understanding SVG arc paths interactive example

The SVG is mostly handled by the Raphaël.js library, which while a teensy bit inconsistent and seemingly still in development, is rather quite nice and takes away all the hassle of having to add and remove SVG yourself.

There are a few known issues. It currently only seems to work in Webkit browsers (works in Chrome and Safari on my Mac!), with it failing in Opera and Firefox, probably to do with how it corrects mouse positions for the location of the <div> containing the SVG. I’ll debug and fix this as soon as I can.

If you wish to add similar examples, please feel free to fork the github for this example, modify the first example for other shapes and send me a pull request.

From → Programming, The Web

  1. Really nice for understanding!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: