使用 javascript 获取 svg 文本值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11727787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
grab svg text value with javascript
提问by thefonso
UPDATED:
更新：
so let me use the actual code.... I have this javascript...
所以让我使用实际的代码....我有这个 javascript...
window.writeText = function(form) {
var text;
form.catnumber2.value = "PING";
text = document.getElementByName('cat2Number').innerHtml;
return alert(text);
};
But I get no alert box as expected.
但是我没有按预期收到警报框。
The svg does not show up when I view source via view/developer/view source (I'm in chrome) BUT when I use view/developer/developer tools....I can see the following svg....
当我通过 view/developer/view source（我在 chrome 中）查看源代码时，svg 没有出现，但是当我使用视图/开发人员/开发人员工具时......我可以看到以下 svg......
<svg height="594">
<g ID="MasterG">
<text name="cat2Number">"34"</text>
</g>
</svg>
Any idea what I'm doing wrong? Why is it I can't see the svg code in "view source" but I can in "developer tools" ? Is that the cause of my problem? Is that why my alert box won't "alert"?
知道我做错了什么吗？为什么我在“查看源代码”中看不到 svg 代码，但在“开发人员工具”中可以看到？这是我的问题的原因吗？这就是我的警报框不会“警报”的原因吗？
回答by TheZ
After a couple of seconds of googling and finding this https://stackoverflow.com/a/9602772/1217408
经过几秒钟的谷歌搜索并找到这个https://stackoverflow.com/a/9602772/1217408
I created this JSFiddle example of using textContent: http://jsfiddle.net/hVyTJ/1/
我创建了这个使用的 JSFiddle 示例textContent：http: //jsfiddle.net/hVyTJ/1/
The original http://jsfiddle.net/hVyTJ/uses standard DOM traversal to get to the text element from the root SVG element. While the update targets the text element directly by ID.
原始的http://jsfiddle.net/hVyTJ/使用标准 DOM 遍历从根 SVG 元素获取文本元素。而更新直接通过 ID 定位文本元素。
As for finding attribute values you can use getAttributeNSas described here: http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/
至于查找属性值，您可以getAttributeNS按照此处所述使用：http: //www.carto.net/svg/manipulating_svg_with_dom_ecmascript/
EDIT:
编辑：
As pointed out by Phrogz, a simple getAttributecall is often sufficient. Read the comment for more details.
正如 Phrogz 所指出的，一个简单的getAttribute调用通常就足够了。阅读评论了解更多详情。
回答by evanlikesstuff
you can invoke text()to return the text content of an svg:textelement.
您可以调用text()以返回svg:text元素的文本内容。
// assume svgCont is an svg element
var label = svgCont.append("svg:text").text("hello, world!");
// print the text content to the console
console.log( label.text() );
回答by xgqfrms
just using the dom method
只使用 dom 方法
const svg = document.querySelector(`[data-uuid="live_map_svg"]`);
const shape = svg.querySelector(`text`);
const text = shape.innerHTML;
// const text = shape.textContent;
setTimeout(() => {
svg.insertAdjacentHTML(`beforebegin`, text);
}, 1000);.svg-box{
width: 500px;
height: 500px;
background: #ccc;
color: red;
font-size: 16px;
}
[data-uuid="live_map_svg"]{
font-size: 16px;
}<div class="svg-box">
<svg
data-uuid="live_map_svg" id="live_map_svg"
width="100%" height="100%"
viewBox="0 0 100 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="30" y="50" fill="#369acd">A Area</text>
</svg>
</div>