更改复杂 SVG 中的文本

Question

I have a small SVG illustration of a flip calendar. I've added a text field that currently says "number" in it. I'm trying to display how many days have passed since a specific date, but since every day it increases by one, I want to have an active script updating the number on my website. The illustration was made on Adobe Draw, so the strokes are rather lengthy and confusing, so I removed all of the illustration parts of the SVG for clarity - inside the SVG tags is only the text field.

I think I am missing a key point about how to change the innerText for a text field. On examples I've found on MDN web docs, you can use the DOM to change attributes inside an SVG, but I have no luck. I have tried:

   document.getQuery(".calendar").innerText = diffDays; 
   document.getElementsByClass("calendar").innerText = diffDays;
   document.getElementById("journaled").innerText = diffDays;

 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 75.5"> <script type="text/javascript"> const start = new Date('5/23/2013'); const today = new Date(); const diffTime = Math.abs(today - start); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); document.getQuery(".calendar").textContent = "is anything working?"; document.getElementsByClassName("calendar").textContent = diffDays; document.getElementById("journaled").textContent = diffDays; </script> <defs> <style> .calendar { font-size: 12px; font-family: Georgia; } </style> </defs> <text contentEditable="true" class="calendar" id="journaled" transform="translate(20 51.63)">number</text> </svg>

I have also researched the problem that displays in the console, "Uncaught TypeError: document.getQuery is not a function" and I can't find any resources relevant to SVGs. Any help would be greatly appreciated. JSFiddle

Answer 1

I removed getQuery and getElementsByClassName lines

and extract your JavaScript outside svg and it works ... try this :

 const start = new Date('5/23/2013'); const today = new Date(); const diffTime = Math.abs(today - start); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); document.getElementById("journaled").textContent = diffDays;

 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 75.5"> <defs> <style> .calendar { font-size: 12px; font-family: Georgia; } </style> </defs> <text contentEditable="true" class="calendar" id="journaled" transform="translate(20 51.63)">number</text> </svg>