在复杂的SVG中更改文本

Question

我有一个翻转日历的小SVG插图。我添加了一个文本字段，当前在其中显示“数字”。我正在尝试显示自特定日期以来已经过了多少天，但是由于每天增加一天，因此我想要一个活动脚本来更新网站上的数字。该插图是在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>

我还研究了控制台中显示的问题，“未捕获的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>