如何访问js中svg元素的描述？

Question

svg 元素可以具有此处描述的描述

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc

假设我通过 getElementById 获得了圆的句柄，我如何访问 <desc> 标签的内容？

鉴于 SVG 来自允许我在元素中添加 id 但不能在其描述中添加 id 的编辑器，因此向标签添加 id 不是解决方案。

PS。它不相关，但想法是在要执行的描述符中添加 javascript 代码（通过 Eval）以更新所有者元素。

谢谢！

Answer 1

您可以使用 textContent 检索标签 <desc> 的内容。

我为您举了一个例子，通过按按钮 [=19，可以通过 <textarea> 更改 <desc> 标签的内容=]

第一个console.log()显示<desc>标签的默认内容。所有后续 console.log() 显示修改的内容。

let desc = document.querySelector('desc');
let textarea = document.querySelector('textarea');
let button = document.querySelector('button');

console.log(desc.textContent.trim());

button.onclick = function() {
  desc.textContent = textarea.value;
  console.log(desc.textContent.trim());
}

<textarea></textarea>
<button>change desc</button>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4">
    <desc>
      I'm a circle and that description is here to
      demonstrate how I can be described, but is it
      really necessary to describe a simple circle
      like me?
    </desc>
  </circle>
</svg>

Answer 2

假设你有圈子然后打电话

let desc = circle.getElementsByTagName("desc");

将为您提供所有作为 circle 元素后代的 desc 元素。

你可以遍历这些并用它们做你想做的事。请注意，您将获得 desc 元素的集合，因此如果只有一个元素，它将是该集合中的第一个也是唯一一个元素。

如何访问js中svg元素的描述？

How to access the description of a svg element in js?

javascript

svg

field-description