Question

I’ve just started playing with SVG and Raphael.js and am trying to draw a filled arc but not sure how to start. I’m trying to draw a basic padlock and have the body and two parts of the bolt to fit the arc on top. It’s basically a filled 180deg arc, 10 pixels wide. I’m guessing I need to use the .path() but not sure of the syntax or whether I want to be using “curveTo” or “arc” – struggling to find any good SVG or Raphael tutorial sites to be honest.

var padlockBody = paper.rect(100, 100, 100, 100, 5);
padlockBody.attr("fill", "#000000");

var leftBoltPart = paper.rect(120, 70, 10, 30);
leftBoltPart.attr("fill", "#000000");

var rightBoltPart = paper.rect(170, 70, 10, 30);
rightBoltPart.attr("fill", "#000000");

// TODO: filled arc to fit on top of left/right bolt parts

Answer 1

Arcs are notoriously challenging to write by hand (in pure SVG or in Raphael, it’s the same).

I usually extend Raphael with these methods (credits belong to the55)

// http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
Raphael.fn.arc = function(startX, startY, endX, endY, radius1, radius2, angle) {
  var arcSVG = [radius1, radius2, angle, 0, 1, endX, endY].join(' ');
  return this.path('M'+startX+' '+startY + " a " + arcSVG);
};

Raphael.fn.circularArc = function(centerX, centerY, radius, startAngle, endAngle) {
  var startX = centerX+radius*Math.cos(startAngle*Math.PI/180); 
  var startY = centerY+radius*Math.sin(startAngle*Math.PI/180);
  var endX = centerX+radius*Math.cos(endAngle*Math.PI/180); 
  var endY = centerY+radius*Math.sin(endAngle*Math.PI/180);
  return this.arc(startX, startY, endX-startX, endY-startY, radius, radius, 0);
};

You can find a demo here: http://jsfiddle.net/cahT9/