2

I'm using a charting library which places an SVG image on the page. I can get the Path element in Javascript.

I need to be able to draw text centred over the area defined by the path.

There is the Raphael.js library which simplifies drawing text in SVG, but I can't figure out how to use it to edit an existing SVG in HTML after the page loads. How can I do this? I don't mind if I have to use Raphael.js or some other dependency.

tjp
  • 161
  • 6

2 Answers2

2

Get the size and position of the path in its local coordinate system:

var myPath = svgDocument.querySelector('#myPath');
var boundingBox = myPath.getBBox();

Append the text to the same parent element as the path, positioned in the middle:

var text = svgDocument.createElementNS('http://www.w3.org/2000/svg', 'text');
text.style['text-anchor'] = 'middle';
text.style['dominant-baseline'] = 'middle';
text.setAttribute('x', boundingBox.x + boundingBox.width/2);
text.setAttribute('y', boundingBox.y + boundingBox.height/2);
myPath.parentElement.appendChild(text);

It is important to notice that you won't get information about transforms happening on any parent elements, so you need to ensure that you are working in relation to the same coordinate system.

ccprog
  • 20,308
  • 4
  • 27
  • 44
  • That does it, thanks. Resizing the window causes it to disappear but that's probably behaviour from the library that generated the SVG. – tjp Nov 02 '17 at 17:22
  • Sounds improbable. Maybe a case for a follow-up question? – ccprog Nov 02 '17 at 17:26
  • Oh no, I'm certain it's the library. Turns out it removes and recreates the entire SVG element on resize if the width changes :). Thanks again. – tjp Nov 02 '17 at 17:33
0

Can you group the path and the text object together to get relative positioning? You can assign the following attributes to the text object to help with centering:

  • text-anchor="middle"
  • x="50%"
  • y ="50%"
jasonleehodges
  • 191
  • 2
  • 13
  • "50%" will be relative to the viewport element (most probably the svg element), not the immediate group. – ccprog Nov 02 '17 at 16:40
  • According to this, you can see some relative positioning if you put the transform on the group element (as opposed to the original path): https://stackoverflow.com/questions/479591/svg-positioning – jasonleehodges Nov 02 '17 at 16:46
  • Suppose a path covers only the bottom half of the SVG, without any transform happening. The text would still get positioned in the middle of the SVG, not the middle of the path. – ccprog Nov 02 '17 at 16:52
  • Thank you for the answer, I'm looking for a way to do this in Javascript, not just the positioning attributes though. – tjp Nov 02 '17 at 16:59
  • As far as the javascript goes for adding or changing element attributes, I use d3 to select the element and then add/change the attribute. It would look something like this: d3.select("text").attr("x","50%").attr("y","50%").attr("text-anchor","middle") You'd likely need more than that but that will give you a start on how to modify attributes of an svg element programmatically. – jasonleehodges Nov 02 '17 at 17:02
  • Sorry, the question might not be clear enough. There does not exist a text element to select. There is a path element and I wish to create a text element that is centred over the path element. I don't just want to change a text element's attributes, I want to create a text element. – tjp Nov 02 '17 at 17:09