javascript - 动态添加文本到 SVG 路径

Question

我有一个从 Adob​​e Illustrator 导出的 SVG，它有几个这样的路径，它产生了一个我打算用作文本框的小多边形

<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 属性。然而，我的路径没有这样的属性。

我尝试使用一个 textPath 元素，其中 xlink:href 指向我的路径。我附加到 path，但文本包裹了我的 path 元素，而不是在其中。

那么，有没有什么办法可以实现呢？我在这里接受不同的解决方案。我的梦想是使用 javascript 获取 path 元素并从那里添加文本。但我也可以编辑基本 SVG 文件以添加 文本 或任何其他相关元素和属性来实现此功能，只要我稍后可以从 javascript 动态更改文本即可。由于此 SVG 是由 Illustrator 制作的，我还可以在那里尝试不同的导出选项，以获得适合我的目标的输出。

Answer 1

下面是一些示例代码，它采用标签路径并在其后添加一个 <text> 元素以及您选择的任何文本。

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>