在node.js服务器上更改svg中文本元素的内容

Question

我在节点/快速服务器上使用svg.js以及svgdom尝试设法操作svg然后将其转换为PNG来构建PDF.

目前,我已经做到了这一点

const window = require('svgdom');
const SVG = require('svg.js')(window);
const document = window.document;
const draw = SVG(document.documentElement);
const fs = require('fs');
const tag = fs.readFileSync(`images/name-tag-1-with-name.svg`,'utf8');
const svg = draw.svg(tag);

这是SVG的布局

<svg id="name-tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 288">
  <defs>
    <style>
      .cls-1,
      .cls-2 {
        fill: #414042;
      }

      .cls-2 {
        opacity: 0.95;
      }

      .cls-3,
      .first-name,
      .last-name {
        fill: #fff;
      }

      .cls-4 {
        fill: none;
        stroke: #fff;
        stroke-miterlimit: 10;
      }

      .first-name,
      .last-name {
        font-size: 30.87px;
        font-family: Gibson-SemiBold, Gibson;
        font-weight: 700;
      }

      .cls-6 {
        letter-spacing: -0.01em;
      }

      .last-name {
        letter-spacing: -0.01em;
      }

      .cls-8 {
        letter-spacing: 0em;
      }
    </style>
  </defs>
  <polygon class="cls-1" points="0 0 0 288 216 0 0 0" />
  <polygon class="cls-2" points="0 288 216 288 216 0 0 288" />
  <polygon class="cls-3" points="119.35 66.27 109.12 17.38 98.95 66.02 72.4 85.51 72.4 101.58 72.41 101.61 109 74.78 145.5 101.58 145.5 85.45 119.35 66.27"
  />
  <polygon class="cls-3" points="109 82.28 108.97 82.25 72.4 109.08 72.4 125.15 72.41 125.19 109 98.37 145.5 125.15 145.5 109.04 109 82.25 109 82.28"
  />
  <polygon class="cls-3" points="109 105.85 108.97 105.83 72.4 132.66 72.4 148.75 72.41 148.77 109 121.95 145.5 148.75 145.5 132.63 109 105.83 109 105.85"
  />
  <line class="cls-4" x1="11.95" y1="183" x2="206.53" y2="183" />
  <text class="first-name" transform="translate(76.22 228.16)">
    First
  </text>
  <text class="last-name" transform="translate(47.47 266.32)">
    Last
  </text>
</svg>

我看到有一个get()接受索引的方法,但我可以得到第一个文本元素的唯一方法就是这样......

const fName = svg.get(2).get(8)

我不知道为什么我必须首先选择第二个元素,然后选择我想要获得的元素的实际索引

另外,我不知道我做了set什么,该.select()方法应该返回什么,我可以用某种方式选择带有类名的文本元素,然后能够得到它的索引或以某种方式更改文本？

此时尝试更改该元素的文本也不起作用

fName.plain(firstName)

给我这个错误

TypeError: fName.plain is not a function

我只是想更改文本.first-name,并.last-name在此SVG文件的文本元素,然后我就可以通过沿到它转换成PNG,将进入正在生成一个PDF页面的功能.

任何人都可以帮助我理解如何在这个库中完成这个任务吗？我已经在这几个小时了

编辑

我加载了cheerio并且能够以这种方式获取元素但仍然在努力如何使用它来更改文本.我似乎无法从这里获得对SVG.js元素的引用

const cheerio = require('cheerio')
const $ = cheerio.load(tag);
const firstNameTag = $('text.first-name')
const lastNameTag = $('text.last-name')

Answer 1

对于您的cheerio编辑,您可以使用更改节点的文本内容

firstNameTag.text('This is the new first-name-text');
lastNameTag.text('This is the new last-name-text');

然后获取整个更新文件的字符串

const updatedSvg = $.html();