Question

是否可以使用js更改SVG的文本？

所以，如果我有一些SVG：后来应该是一个预订系统。因此，有一个日历，并且每个可预订的时间我都有一个日历的SVG（例如MacOS），并且在每个日历中，SVG以后都应该显示正确的日期。那么可以制作一个SVG变量然后更改内容吗？

<?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>

现在，是否可以更改文本的内容？

Answer 1

此代码对我有用，请使用所需的功能（日期或时间）而不是“新文本”。

var list = document.getElementsByTagName("g")[0]; 
var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";

Answer 2

如果您需要几个这样的SVG元素，则可以执行以下操作：为了清楚起见，我已经简化了很多代码。

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>

更改Svg的文本

2 个答案: