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

Question

svg elements can have descriptions as described here

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

Assuming I got the handle of the circle via getElementById, how can I access the content of the <desc> tag?

Adding an id to the tag cannot be a solution given the SVG comes from an editor that allows me to add id's in the elements, but not to their descriptions.

PS. It's not relevant, but the idea is to add javascript code in the descriptor to be executed (via Eval) to update the owner element.

Thanks!

s.kuznetsov · Answer 1 · 2021-01-31T22:47:53.510

2

You can retrieve the content of tag <desc> with textContent.

I made an example for you with the ability to change the content of the <desc> tag through <textarea>, by pressing a button

The first console.log() displays the default content of the <desc> tag. All subsequent console.log() show modified content.

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>

edited Jan 31 '21 at 22:47

answered Jan 31 '21 at 22:34

s.kuznetsov

14,870
3
10
25

I am not sure if this would work for me. The premise is to have the handle of the circle via getElementByID, which means I can have a hundred circles but I want the desc of an specific circle given its id. – javanoob Jan 31 '21 at 22:57
will the identifiers be dynamic? – s.kuznetsov Jan 31 '21 at 23:10
Actually I work with the handle. I have too many elements I get the handle via "getelementbyid" for every element I need to modify in the future. But I assume I could do the same with the description. So I think I can work with static id's, yes. – javanoob Jan 31 '21 at 23:19
Not in a comment. But I am not sure if the code is going to be enligthing at all, because I haven't attepmted that part yet. First is to get the description. Second is to execute the code in the description when I update data. every svg has an element with an id, and the backend will send a json with different values for each element. Each element has to interpret the value in a different way. The interpretation code will be in their description. – javanoob Jan 31 '21 at 23:35

score 1 · Accepted Answer · answered Feb 03 '21 at 22:22

assuming you've the circle then calling

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

will get you all the desc elements that are descentants of the circle element.

You can loop over those and do what you want with them. Note that you'll get a collection of desc elements so if there's only one element it will be the first and only element in that collection.

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

2 Answers2