我正在使用一个图表库，它将 SVG 图像放置在页面上。我可以在 Javascript 中获取 Path 元素。
我需要能够在路径定义的区域上绘制居中的文本。
Raphael.js 库可以简化 SVG 中文本的绘制，但我不知道如何在页面加载后使用它来编辑 HTML 中的现有 SVG。我怎样才能做到这一点？我不介意是否必须使用 Raphael.js 或其他依赖项。
最佳答案
获取路径在其本地坐标系中的大小和位置:
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);
值得注意的是，您不会获得有关任何父元素上发生的变换的信息，因此您需要确保您正在相对于相同的坐标系进行工作。
关于javascript - 有没有一种简单的方法可以使用 Javascript 在 DOM 中现有的 SVG 路径上绘制居中文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47080136/