Argthtjtr

Is it possible to make changes to the text of an SVG with js?

So if I have some SVG:s. Later it should be a booking system. So there is a calendar and every bookable time I have an SVG of an calendar (like MacOS) and in every calendar SVG should later be displaying the correct date. So is it possible to make an SVG variable and then change the content?

<?xml version="1.0" standalone="no"?>

<!-- Generator: Gravit.io -->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 200 200" width="200" height="200">

  <defs>

    <clipPath id="_clipPath_BTzJAWdHJZVUGGYrrUDwSyNPa5Ujloqh">

      <rect width="200" height="200"/>

    </clipPath>

  </defs>

  <g clip-path="url(#_clipPath_BTzJAWdHJZVUGGYrrUDwSyNPa5Ujloqh)">

    <g>

      <rect x="41.4" y="40.189" width="117.199" height="120.236" transform="matrix(0.951057,-0.309017,0.309017,0.951057,-26.102184,35.811068)" fill="rgb(28,27,27)"/>

      <rect x="41.4" y="38.233" width="117.199" height="120.236" transform="matrix(0.961262,-0.275637,0.275637,0.961262,-23.235267,31.373671)" fill="rgb(57,57,57)"/>

      <rect x="41.4" y="38.233" width="117.199" height="120.236" transform="matrix(0.978148,-0.207912,0.207912,0.978148,-18.262998,22.940365)" fill="rgb(81,80,80)"/>

      <rect x="41.4" y="36.276" width="117.199" height="120.236" transform="matrix(0.984808,-0.173648,0.173648,0.984808,-15.219469,18.829264)" fill="rgb(149,149,149)"/>

      <rect x="41.4" y="34.32" width="117.199" height="120.236" transform="matrix(0.990268,-0.139173,0.139173,0.990268,-12.170036,14.836374)" fill="rgb(208,208,208)"/>

      <rect x="41.4" y="32.364" width="117.199" height="120.236" transform="matrix(0.994522,-0.104528,0.104528,0.994522,-9.11916,10.959471)" fill="rgb(255,255,255)"/>

    </g>

    <rect x="36.838" y="32.603" width="117.199" height="32.94" transform="matrix(0.994522,-0.104528,0.104528,0.994522,-4.606717,10.24477)" fill="rgb(255,63,56)"/>

    <g transform="matrix(0.994522,-0.104528,0.104528,0.994522,35.499851,38.859638)">

      <text transform="matrix(1,0,0,1,32.049347,25.853783)" style="font-family:'Open Sans';font-weight:400;font-size:24px;font-style:normal;word-spacing:5;fill:#ffffff;stroke:none;">NOV</text>

    </g>

    <g transform="matrix(0.994522,-0.104528,0.104528,0.994522,39.028839,71.380565)">

      <text transform="matrix(1,0,0,1,17.498417,70.832115)" style="font-family:'Open Sans';font-weight:400;font-size:70px;font-style:normal;fill:#000000;stroke:none;">16</text>

    </g>

  </g>

</svg>    

And now, is it possible to change the content of the text?

In the case you need several SVG elements like this you can do the following:
For clarity I've simplified a lot your code.

let svgs = document.querySelectorAll(".svg")





function changeDate(svg,month,day){ 

  svg.querySelectorAll("text")[0].textContent = month;

  svg.querySelectorAll("text")[1].textContent = day;

}



changeDate(svgs[0],"DEC","25");

changeDate(svgs[1],"JAN","6");

.month{font-family:'Open Sans';font-weight:400;font-size:20px;font-style:normal;word-spacing:5;fill:white;stroke:none;}

.day{font-family:'Open Sans';font-weight:400;font-size:70px;font-style:normal;fill:#000000;stroke:none;}

text{text-anchor:middle;}

<svg viewBox="0 0 200 200" width="200" height="200">

<g id="bg">

  <g>

      <rect x="41.4" y="40.189" width="117.199" height="120.236" transform="matrix(0.951057,-0.309017,0.309017,0.951057,-26.102184,35.811068)" fill="rgb(28,27,27)"/>

      <rect x="41.4" y="38.233" width="117.199" height="120.236" transform="matrix(0.961262,-0.275637,0.275637,0.961262,-23.235267,31.373671)" fill="rgb(57,57,57)"/>

      <rect x="41.4" y="38.233" width="117.199" height="120.236" transform="matrix(0.978148,-0.207912,0.207912,0.978148,-18.262998,22.940365)" fill="rgb(81,80,80)"/>

      <rect x="41.4" y="36.276" width="117.199" height="120.236" transform="matrix(0.984808,-0.173648,0.173648,0.984808,-15.219469,18.829264)" fill="rgb(149,149,149)"/>

      <rect x="41.4" y="34.32" width="117.199" height="120.236" transform="matrix(0.990268,-0.139173,0.139173,0.990268,-12.170036,14.836374)" fill="rgb(208,208,208)"/>

      <rect x="41.4" y="32.364" width="117.199" height="120.236" transform="matrix(0.994522,-0.104528,0.104528,0.994522,-9.11916,10.959471)" fill="rgb(255,255,255)"/>

    </g>

    <rect  x="36.838" y="32.603" width="117.199" height="32.94" transform="matrix(0.994522,-0.104528,0.104528,0.994522,-4.606717,10.24477)" fill="rgb(255,63,56)"/>

  </g>



</svg> 



<svg class="svg" viewBox="0 0 200 200" width="200" height="200">

  <use xlink:href="#bg" />

  <g transform="matrix(0.994522,-0.104528,0.104528,0.994522,95,57)">

      <text class="month" >NOV</text>

      <text class="day" x="0" y="75">16</text>

  </g>

</svg>



<svg class="svg" viewBox="0 0 200 200" width="200" height="200">

  <use xlink:href="#bg" />

  <g transform="matrix(0.994522,-0.104528,0.104528,0.994522,95,57)">

      <text class="month" >NOV</text>

      <text class="day" x="0" y="75">16</text>

  </g>

</svg>

this code worked for me, use your desired function (date or time) instead of New Text.

var list = document.getElementsByTagName("g")[0]; 

var textNode = list.getElementsByTagName("text")[0].children[0];

textNode.textContent = "New Text";