大佬教程收集整理的这篇文章主要介绍了动态添加文本到 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,请注明来意。