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

【问题标题】：How to access the description of a svg element in js?如何在js中访问svg元素的描述？
【发布时间】：2021-01-31 22:24:44
【问题描述】：

svg 元素可以有这里描述的描述

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

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

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

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

谢谢！

【问题讨论】：

标签： javascript svg field-description

【解决方案1】：

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

我为你做了一个例子，可以通过按按钮

来通过<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>

【讨论】：

我不确定这是否适合我。前提是通过getElementByID获得圆的句柄，这意味着我可以有一百个圆，但我想要给定id的特定圆的desc。
标识符是动态的吗？
其实我是用手柄工作的。我有太多元素，我通过“getelementbyid”获得了将来需要修改的每个元素的句柄。但我想我可以对描述做同样的事情。所以我认为我可以使用静态 ID，是的。
不在评论中。但我不确定代码是否会变得有趣，因为我还没有尝试过那部分。首先是获取描述。其次是在我更新数据时执行描述中的代码。每个 svg 都有一个带有 id 的元素，后端将为每个元素发送一个具有不同值的 json。每个元素都必须以不同的方式解释值。解释代码将在他们的描述中。

【解决方案2】：

假设你有圈子然后打电话

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

将为您获取所有 desc 元素，它们是 circle 元素的后代。

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

【讨论】：