大佬教程收集整理的这篇文章主要介绍了动态添加文本到 SVG 路径，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个从 Adobe 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,8,3.58,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 文件以添加 text 或任何其他相关元素和属性以使其工作，只要我稍后可以从 JavaScript 动态更改文本即可。由于这个 SVG 是由 Illustrator 生成的，我还可以在那里尝试不同的导出选项，以便为我的目标获得正确的输出。
以下是一些示例代码，它采用标签路径并在其后添加一个带有您选择的任何文本的 <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,8,3.58,8l0,0 C460,404.42,456.42,408,452,408z" />
</g>
</svg>,
因为您可以编辑基础 SVG
创建一个合适的 SVG 来使用
之后使用 JavaScript 动态添加文本。
无需text x,y 计算，pathLength 和startoffset 即可完成
或者，如果您喜欢，可以从 getBBox()
动态创建蓝线
这也适用于您当前的路径；只是需要更多的计算
一切都与坐标有关，
并定位蓝线（然后使用stroke="transparent"）：
游乐场：
<svg viewbox="387 390 74 20">
<path fill="lightgreen" d="M452,0C460,408z" />
<circle cx="452" cy="408" r="2" fill="red"></circle>
<circle cx="388" cy="400" r="2" fill="green"></circle>
<path id="P" pathLength="100" d="M388 400h72" stroke="blue"></path>
<text>
<textPath href="#P" startoffset="50" text-anchor="middle" dominant-baseline="middle"
fill="green" font-size="14px">My Text</textPath>
</text>
</svg>,
感谢您的回答！我最终使用了 Paul LeBeau's function 的调整版本来考虑 the structure suggested by DAnny '365CSI' Engelman，因此我不必使用翻译来垂直居中文本。
let label = document.querySELEctor("#mylabel");
addLabelTextPath(label,"Something");
function addLabelTextPath(bgPath,labelText) {
let bbox = bgPath.getBBox();
let x = bbox.x + bbox.width / 2;
let y = bbox.y + bbox.height / 2;
// Create the path line
let patHelem = document.createElementNS(bgPath.namespaceURI,"path");
patHelem.setAttribute("pathLength",100);
patHelem.setAttribute("d",`M${Bbox.x} ${y}h${Bbox.width}`);
patHelem.id = `baseline-${BgPath.iD}`;
// Create a <text> element
let textElem = document.createElementNS(bgPath.namespaceURI,"text");
// Create a <textPath> element
let textPath = document.createElementNS(bgPath.namespaceURI,"textPath");
textPath.setAttribute("href",`#${patHelem.iD}`);
//Center text
textPath.setAttribute("dominant-baseline","Middle");
textPath.setAttribute("startOffset",50);
textPath.setAttribute("text-anchor","middle");
// Give it a class that will determine the text size,etc
textPath.classList.add("label-text");
// Set the text
textPath.textContent = labelText;
// Add the elements directly after the label BACkground path
bgPath.after(patHelem);
patHelem.after(textElem);
textElem.appendChild(textPath);
}.st37 {
fill: lightblue;
}
.label-text {
font-size: 10px;
fill: darkblue;
}<svg viewbox="387 390 74 20">
<g>
<path id="mylabel" class="st37" d="M452,408z" />
</g>
</svg>以上是大佬教程为你收集整理的动态添加文本到 SVG 路径全部内容，希望文章能够帮你解决动态添加文本到 SVG 路径所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。