用javascript获取svg文本值

grab svg text value with javascript

本文关键字：文本 svg 获取 javascript      更新时间：2024-05-01

我有这个javascript。。。

window.writeText = function(form) {
  var text;
  form.catnumber2.value = "PING";
  text = document.getElementByName('cat2Number').innerHtml;
  return alert(text);
};

但我没有收到预期的警报框。

当我通过view/developer/view-source（我在chrome中）查看源代码时，svg不会显示，但当我使用view/develver/developer工具时。。。。我可以看到下面的svg。。。。

<svg height="594">
    <g ID="MasterG">
        <text name="cat2Number">"$1234"</text>
    </g>
</svg>

知道我做错了什么吗？为什么我在"视图源"；但我可以在"；开发者工具"？这是我问题的原因吗？这就是为什么我的提醒框不会"；警报"；？

经过几秒钟的谷歌搜索并找到https://stackoverflow.com/a/9602772/1217408

我创建了这个使用textContent的JSFiddle示例：http://jsfiddle.net/hVyTJ/1/

原件http://jsfiddle.net/hVyTJ/使用标准DOM遍历从根SVG元素获取文本元素。而更新通过ID直接针对文本元素。

关于查找属性值，可以使用getAttributeNS，如下所述：http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

编辑：

正如Phrogz所指出的，一个简单的getAttribute调用通常就足够了。阅读评论了解更多详细信息。

您可以调用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() );

没有所有不必要的讨论：

获取SVG元素：

svg = document.getElementById("my_svg_id");

从SVG获取内部文本：

var text = svg.textContent

对于只需要显示文本的用户，可以使用Selection API及其Range界面。

简单地使用.textContent也可以获取所有未显示的文本节点：

const svg = document.querySelector("svg");
console.log(svg.textContent);
<svg>  
  <defs>
    <desc>This text is not displayed, it shouldn't be grabbed</desc>
    <!-- same for all the new-lines in the markup -->
   </defs>
  <rect width="100%" height="100%" fill="red" />  
  <circle cx="150" cy="100" r="80" fill="green" />  
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>  
</svg>

由于SVG元素没有innerText属性，我们需要在所有文本节点上进行迭代，并检查在选择它们时是否获得BBox。

const svg = document.querySelector("svg");
const range = new Range();
let textContent = "";
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_TEXT, null);
while(walker.nextNode() && walker.currentNode) {
  range.selectNode(walker.currentNode);
  if (range.getClientRects().length) {
    textContent += walker.currentNode.textContent;
  }
}
console.log(textContent);
<svg>  
  <defs>
    <desc>This text is not displayed, it shouldn't be grabbed</desc>
    <!-- same for all the new-lines in the markup -->
   </defs>
  <rect width="100%" height="100%" fill="red" />  
  <circle cx="150" cy="100" r="80" fill="green" />  
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>  
</svg>

仅使用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>

相关文章：