Изменение текста внутри сложного SVG

Question

У меня есть небольшая SVG-иллюстрация перевернутого календаря. Я добавил текстовое поле с надписью «число». Я пытаюсь показать, сколько дней прошло с указанной даты c, но, поскольку каждый день она увеличивается на единицу, я хочу, чтобы активный скрипт обновлял число на моем веб-сайте. Иллюстрация была сделана в Adobe Draw, поэтому штрихи были довольно длинными и запутанными, поэтому я удалил все части иллюстрации SVG для ясности - внутри тегов SVG находится только текстовое поле.

Я думаю, что я отсутствует ключевой момент о том, как изменить innerText для текстового поля. На примерах, которые я нашел в веб-документах MDN, вы можете использовать DOM для изменения атрибутов внутри SVG, но мне не повезло. Я пробовал:

   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>

Я также исследовал проблему, которая отображается в консоли: «Uncaught TypeError: document.getQuery не является функцией», и я не могу найти ресурсы, относящиеся к SVG. , Любая помощь будет принята с благодарностью. JSFiddle

Answer 1

Я удалил getQuery и getElementsByClassName строки

и извлек * JavaScript вне svg , и это работает ... попробуйте это:

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>