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

Question

svg 元素可以有描述here

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

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

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

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

谢谢！

Answer 1

您可以使用 检索标签的<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>

Answer 2

假设你有圈子然后打电话

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

将为您提供所有作为圆元素后裔的 desc 元素。

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