有没有一种简单的方法可以使用Javascript在DOM中的现有SVG路径上绘制居中文本？

Question

我正在使用图表库，在页面上放置一个SVG图像。我可以在Javascript中获取Path元素。

我需要能够以路径定义的区域为中心绘制文本。

Raphael.js库简化了SVG中的绘图文本，但我无法弄清楚如何在页面加载后使用它来编辑HTML中的现有SVG。我怎样才能做到这一点？我不介意我是否必须使用Raphael.js或其他依赖。

Answer 1

在本地坐标系中获取路径的大小和位置：

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

将文本附加到与位于中间的路径相同的父元素：

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);

重要的是要注意，您不会获得有关任何父元素发生的变换的信息，因此您需要确保您正在使用相同的坐标系。

Answer 2

您可以将路径和文本对象组合在一起以获得相对定位吗？您可以将以下属性分配给文本对象以帮助进行居中：

• text-anchor =“middle”
• X = “50％”
• y =“50％”