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

问题描述

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

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

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

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

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

谢谢！

解决方法

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

我为您制作了一个示例，可以通过按按钮

通过 <desc> 更改 <textarea> 标记的内容

第一个 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>

,

假设你有圈子然后打电话

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

将获得所有作为圆元素后裔的 desc 元素。

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