动态添加文本到 SVG 路径
问题说明
我有一个从 Adobe Illustrator 导出的 SVG，有几个这样的路径，它生成了一个我打算用作文本框的小多边形
I have an SVG exported from Adobe Illustrator with several paths like this, which produces a small polygon I intend to use as a text box
<svg viewbox="387 390 74 20">
<g>
<path d="M452,408h-56c-4.42,0-8-3.58-8-8l0,0c0-4.42,3.58-8,8-8h56c4.42,0,8,3.58,8,8l0,0 C460,404.42,456.42,408,452,408z" />
</g>
</svg>我想动态地向其中添加文本.我在这里看到了许多类似的问题，但其中大多数都涉及根据 path 元素的 x 和 y 属性为 text 元素指定 x 和 y 属性.但是，我的路径没有这样的属性.
I'd like to dynamically add text to it. I've seen many similar questions here, but most of them involed specifying a x and y property for a text element based on the x and y property the path element. My path, however, does not have such properties.
我尝试使用 textPath 元素，其中 xlink:href 指向我的路径.我被附加到 path，但文本包裹了我的 path 元素，而不是在里面.
I've tried to use a textPath element with xlink:href pointing to my path. I gets attached to the path, but the text wraps my path element instead of being inside it.
那么，有没有办法实现这一目标?我对这里的不同解决方案持开放态度.我的梦想是使用 javascript 来获取 path 元素并从那里添加文本.但我也可以编辑基础 SVG 文件以添加 text 或任何其他相关元素和属性来完成这项工作，只要我稍后可以从 javascript 动态更改文本即可.由于这个 SVG 是由 Illustrator 生成的，我还可以在那里尝试不同的导出选项，以便为我的目标获得正确的输出.
So, is there a way to achieve this? I'm open to different solutions here. My dream would be to use javascript to get the path element and add the text from there. But I could also edit the base SVG file to add a text or any other relevant element and attributes to make this work, as long as I can change the text dynamically from javascript later. And since this SVG is produced by Illustrator, I could also try different export options there in order to get a proper output for my goal.
正确答案
以下是一些示例代码，它采用标签路径并在其后添加一个 元素以及您选择的任何文本.
Here's some sample code that takes a label path and adds a <text> element after it with whatever text you choose.
let label1 = document.querySelector("#label1");
addLabelText(label1, "Something");
function addLabelText(bgPath, labelText)
{
let bbox = bgPath.getBBox();
let x = bbox.x bbox.width / 2;
let y = bbox.y bbox.height / 2;
// Create a <text> element
let textElem = document.createElementNS(bgPath.namespaceURI, "text");
textElem.setAttribute("x", x);
textElem.setAttribute("y", y);
// Centre text horizontally at x,y
textElem.setAttribute("text-anchor", "middle");
// Give it a class that will determine the text size, colour, etc
textElem.classList.add("label-text");
// Set the text
textElem.textContent = labelText;
// Add this text element directly after the label background path
bgPath.after(textElem);
}.st37 {
fill: linen;
}
.label-text {
font-size: 10px;
fill: rebeccapurple;
transform: translate(0, 3px); /* adjust vertical position to centre text */
}<svg viewbox="387 390 74 20">
<g>
<path d="M452,408h-56c-4.42,0-8-3.58-8-8l0,0c0-4.42,3.58-8,8-8h56c4.42,0,8,3.58,8,8l0,0 C460,404.42,456.42,408,452,408z" />
</g>
</svg>这篇好文章是转载于：学新通技术网
