动态添加文本到 SVG 路径 [英] Add text to SVG path dynamically

问题描述

我有一个从 Adob​​e 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 class="st37" 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 id="label1" class="st37" 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>

这篇关于动态添加文本到 SVG 路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！