javascript - 有没有一种简单的方法可以使用 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);

请务必注意，您不会获得有关任何父元素上发生的变换的信息，因此您需要确保您在同一坐标系下工作。