Put label in the "center" of an SVG path

path svg raphael polygon
sol picture sol · Nov 7, 2009 · Viewed 14.9k times · Source

I'm trying to draw a label on a polygon of an svg file. The problem I'm facing is to find out roughly the center of this polygon to place the label, as the path's coordinates are in svg format and need to be parsed. Is there an easier way to determine the center of an svg polygon (maybe someone can point out a javascript library or a snippet)? I'm using Raphael javascript library to manipulate the svg, but it doesn't seem to go beyond the standard svg functionality.

Answer

Erik Dahlström picture Erik Dahlström · Nov 7, 2009

You could try the following approximation for doing something similar to the polygon suggestion, based on SVG DOM methods:

var totalPathLength = pathelm.getTotalLength();
var step = totalPathLength / 100;
for(var dist=0; dist < totalPathLength; dist+=step)
{
  var pt = pathelm.getPointAtLength(dist);
  addToAverage(pt.x, pt.y);
}

I think the simplest approach is to use the center of the path element's boundingbox (pathelm.getBBox()), that's simpler than the polygon suggestion.

Related questions

Can I apply a gradient along an SVG path?

I'd like to put a simple loading indicator on my website that's triggered by a script. It should be a simple circle arc that's got a gradient and is spinning while the user is waiting. I haven't tried the animation …

Read More
Making a SVG path like a smooth line instead of being ragged

Well in my project I create river lines from pathes. And due to my kind of big stroke-width it is very ragged: I already searched around. But the only thing I found was stroke-linejoin: round;. As you can see here: …

Read More
Mirroring a path in SVG

I want to code a Christmas tree in SVG using path. I started with writing the path for the left half of the tree, now I want to mirror these points along the y-axis to create the right half. I …

Read More