沿 SVG 路径键入时如何更改字体？

Question

我有以下代码，它沿路径添加字母以模拟打字效果。但是，我希望最后一段文字“It's our jam”与底部图片中的第一段字体不同。有没有办法做到这一点？我一直在尝试动态添加一个 class，但它更新了整个 tspan，我不知道是否可以添加第二个 tspan 或类似的？

var input = "";
var draw = SVG().addTo("#drawing").viewbox(0, 0, 300, 140);
var text = draw.text(function (add) {
  add.tspan(input).attr("class", "title");
});

const stringToType =
  "Great design is not just our bread + butter ... it's our jam";

textPath = text.path(
  "M 10 20 C 23 15 45 12 64 20 C 99 36 96 48 135 57 C 172 65 188 61 204 58 L 204 58"
);

var count = 0;

var paused = 0;
var secondPause = 0;
var complete = false;
var restart = false;

var newInput = "";

var timer = setInterval(function () {
  if (!paused) {
    var textToAdd = stringToType[count];

    newInput = newInput + textToAdd;
    textPath.tspan(newInput).attr("class", "title");

    count++;
    if (count === stringToType.length) {
      paused++;
    }
  } else {
    clearInterval(timer);
  }
}, 100);

body {
  font-size: 8px;
}

<div id="drawing"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script>

我想要达到的效果（忽略俗气的一点）：

Answer 1

您可以使用 tspan 标记来设置部分文本的样式：

let text1 = `Great design is not just our bread + butter... `;
let text2 = `it's our jam`;
let pointer1 = 1;
let pointer2 = 1;

let text_path = document.querySelector('textPath');

let write = setInterval(() => {
    let text = text1.slice(0,pointer1);
    if(pointer1 >= text1.length){
        text += '<tspan>';
        text += text2.slice(0,pointer2);
        text += '</tspan>'
        pointer2++;
    } else {
        pointer1++;
    }
    
    text_path.innerHTML = text;
    
    if(pointer2> text2.length){
        clearInterval(write);
    }
}, 100)

<svg viewBox="0 0 300 140" xmlns="http://www.w3.org/2000/svg" fill="orange">
    <style>
        tspan {
            font-weight: bold;
        }
    </style>
    
    <path id="textPath" fill="none" d="M 10 20 C 23 15 45 12 64 20 C 99 36 96 48 135 57 C 172 65 188 61 204 58 L 204 58" />
    
    <text>
        <textPath href="#textPath" font-size="9.2"></textPath>
    </text>
</svg>

沿 SVG 路径键入时如何更改字体？

How can I change the font of when typing along a SVG path?

javascript

css

svg

svg.js