动态更改SVG文件的文本
Dynamically change text of SVG file
我有一个包含代码的外部SVG文件
<g
inkscape:groupmode="layer"
id="layer9"
inkscape:label="score"
style="display:inline">
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="100.3568906"
y="20.353357"
id="text5833"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan5834"
x="300.3568906"
y="20.353357">Score</tspan></text>
</g>
我需要动态更改JS文件中的文本"分数"。我已经尝试过,但我无法动态更改文本。
我尝试的是:
var list = layerNamed('score').getElementsByTagName("g");
var textNode = document.createTextNode("Score:-1");
list.appendChild(textNode);
可以使用
以下代码更改现有 text
元素中的文本。
document.getElementById('textid').textContent = "new text";
工作示例如下:
function changeText()
{
document.getElementById('textid').textContent = "new text";
}
<svg height="30" width="200">
<text id="textid" x="0" y="15" fill="red">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
<button onclick="changeText()">Click here to change text</button>
你的代码中存在一些问题。
1) layerNamed('score').getElementsByTagName("g")
返回具有指定标记名称的所有元素的集合,作为 NodeList 对象。可以通过索引号访问节点。指数从 0 开始。
因此,要访问第一个 g 元素,您应该按如下所示进行编码。
var list = layerNamed('score').getElementsByTagName("g")[0];
2) 无需附加新的文本元素来更新文本内容。只需访问文本和 tspan 并更新 tspan 的文本内容即可。
var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";
var list = document.getElementsByTagName("g")[0]; //document.getElementById("#layer9");
var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";
<svg height="30" width="800">
<g inkscape:groupmode="layer" id="layer9" inkscape:label="score" style="display:inline">
<text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="100.3568906" y="20.353357" id="text5833" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan5834" x="300.3568906" y="20.353357">Hello</tspan></text>
</g>
</svg>
对于您的特定示例,以下是使用原始 JavaScript 和 jQuery 设置文本的方法:
updateText("tspan5834", "A different score");
//updateTextWithJQuery("tspan5834", "now using jquery"); // uncomment this line to see how jquery works
function updateText(tspanId, txt) {
var spanEl = document.getElementById(tspanId);
while( spanEl.firstChild ) {
spanEl.removeChild( spanEl.firstChild );
}
spanEl.appendChild( document.createTextNode(txt) );
}
function updateTextWithJQuery(tspanId, txt) {
$("#"+tspanId).text(txt);
}
jsFiddle: https://jsfiddle.net/w91sn1dk/3/
相关文章:
- 使用不带文本文件的OpenLayers显示POI
- 使用javascript从文本文件中获取值
- 从javascript中的文本文件中获取值
- 在移动浏览器上显示大型文本文件
- 搜索文本文件并附加到表中
- 将文本文件加载到javascript中
- Angular http.get没有'我不喜欢在开头和结尾加方括号的文本文件
- 一个javascript实现base64图像编码并将结果写入文本文件
- 用javascript读取文本文件的第一行
- 从文本文件js中读取列表
- 使用JavaScript将压缩文本文件加载到字符串中
- 数组在手动写入时有效,但从文本文件加载时无效
- 在浏览器中打开文本文件-服务器上出现错误
- html表单,它有文本和表,现在我想在一个简单的文本文件中保存和检索数据,如何实现它
- 任何编写文本文件并将其替换为上一个文本文件的方法
- html或java脚本代码在硬盘中创建一个文本文件
- Firefox插件:保存到文本文件的HTTP日志,其中包含时间、用户名、计算机名;t创建文本文件
- 从文本文件加载jsondata时出现空白页
- 如何在不干扰电子邮件通知的情况下将眼镜保存在文本文件中
- 使用javascript创建新的文本文件(),但存储[objectFile]而不是文本