# javascript - SVG, Raphael.js, Drawing

This I guess is more of a maths question or maybe an SVG question. I was looking at modifying some example code I found on the raphael.js site. I already modified it to have a custom centre point. Now I want to modify it so that I can specify at which angle the arc is started at. (similar to d3.js so I can use it to have something like a bar chart with the middle missing).

However I have no idea where or how to begin. My maths is terrible, I have no idea what alpha is and the a variable does. Or why x and y are calculated that way. I have been reading the SVG specification over and over but I am missing some crucial basic knowledge and I don't know.

Can someone point me in the right direction so I can begin to understand this stuff?

``window.onload = function () {var r = Raphael("holder", 600, 600),R = 200,init = true,param = {stroke: "#fff", "stroke-width": 30};// Custom Attributer.customAttributes.arc = function (xPos, yPos, value, total, R) {var alpha = 360 / total * value,a = (90 - alpha) * Math.PI / 180,x = xPos + R * Math.cos(a),y = yPos - R * Math.sin(a),var path = [["M", xPos, yPos - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];return {path: path};};var sec = r.path().attr(param).attr({arc: [300, 300, 3, 60, R]});};``

Running the code produces:

``<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><path style="" fill="none" stroke="#bfb5b5" d="M300,100A200,200,0,0,1,361.8033988749895,109.7886967409693" stroke-width="30"></svg>``

Also I have no idea how the arc parameters work together to draw what they are drawing.

Apologies for the lack of focus on the question.

EDIT:

It's based on the polar clock example. http://raphaeljs.com/polar-clock.html

I think the author of the example is trying to create a custom attribute in order to make it easy to create arcs based on clock rotation. Basically the `total` paramter of the custom attribute represents the total movement of the clock (60 seconds) while `value` (3 in your case) represents the length (in seconds) of the arc you are trying to draw. So basically you have an arc of 3 seconds.

Now for the math:

• `alpha` : the angle (in degrees) of the arc. You notice the conversion from seconds to degrees: 3 seconds -> 18 degrees

• `a` : the angle in radians. Trigonometric formulas use radians not degrees, so you need this conversion. For some reason that I don't understand, this is the complementary angle (`90 - alpha`)
Edit: the complementary angle is (probably) used to compensate for the fact that in trigonometry the y-axis points upwards while on the svg canvas it points downwards.

• `x, y` : ending points of the path (arc) you are drawing. These are caculated using elementary trigonometry (sorry..you're not getting any help here).

The parameters for the svg arc are described here: http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands