Изменить текст SVG - PullRequest
Новая
       17

Изменить текст SVG

0 голосов
/ 17 ноября 2018

Можно ли внести изменения в текст SVG с помощью js?

Так что, если у меня есть SVG: s.Позже это должна быть система бронирования.Таким образом, есть календарь, и каждый раз, когда я могу забронировать, у меня есть 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>

А теперь можно ли изменить содержание текста?

Ответы [ 2 ]

0 голосов
/ 17 ноября 2018

В случае, если вам нужно несколько 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>
0 голосов
/ 17 ноября 2018

этот код работал для меня, используйте желаемую функцию (дату или время) вместо нового текста. 

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