使用 javascript 獲取 svg 文本值

Question

我有這個javascript ...

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

但是我沒有像預期的那樣收到警告框。

當我通過視圖/開發人員/查看源代碼（我在 chrome 中）查看源代碼時，svg 沒有顯示，但是當我使用視圖/開發人員/開發人員工具時......我可以看到以下 svg......

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

知道我做錯了什么嗎？ 為什么我在“查看源代碼”中看不到 svg 代碼，但在“開發人員工具”中可以？ 這是我的問題的原因嗎？ 這就是我的警報框不會“警報”的原因嗎？

Answer 1

更新：

所以讓我使用實際代碼......我有這個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 沒有出現，但是當我使用視圖/開發人員/開發人員工具時....我可以看到以下 svg.... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

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

知道我做錯了什么嗎？ 為什么我在“查看源代碼”中看不到 svg 代碼，但在“開發人員工具”中可以看到？ 這是我問題的原因嗎？ 這就是我的警報框不會“警報”的原因嗎？

Answer 2

更新：

所以讓我使用實際代碼......我有這個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 沒有出現，但是當我使用視圖/開發人員/開發人員工具時....我可以看到以下 svg.... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

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

知道我做錯了什么嗎？ 為什么我在“查看源代碼”中看不到 svg 代碼，但在“開發人員工具”中可以看到？ 這是我問題的原因嗎？ 這就是我的警報框不會“警報”的原因嗎？

Answer 3

沒有所有不必要的討論：

抓住你的 SVG 元素：

svg = document.getElementById("my_svg_id");

從 SVG 中獲取內部文本：

var text = svg.textContent

Answer 4

更新：

所以讓我使用實際代碼......我有這個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 沒有出現，但是當我使用視圖/開發人員/開發人員工具時....我可以看到以下 svg.... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

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

知道我做錯了什么嗎？ 為什么我在“查看源代碼”中看不到 svg 代碼，但在“開發人員工具”中可以看到？ 這是我問題的原因嗎？ 這就是我的警報框不會“警報”的原因嗎？

Answer 5

對於只需要顯示文本的用戶，可以使用 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>