javascript - 沿 SVG 路径输入时如何更改字体?
问题描述
我有以下代码沿路径添加字母以模拟打字效果。但是,我希望根据底部的图像,最后一点文本“这是我们的果酱”与第一个不同的字体。有没有办法做到这一点?我一直在尝试动态添加一个类,但它会更新整个 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>
解决方案
您可以使用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>
推荐阅读
- amazon-web-services - 我是否需要设置 Glacier Vault 来归档 S3 中的数据?
- sentry - 是否可以将其他属性传递给 Sentry 用户反馈报告?
- postgresql - 带有 uuid 的递归分层 PGSQL 请求进入循环
- performance - 性能分析服务结构依赖应用程序
- react-native - react native 中的 RCTTextInlineImage 是什么,以及如何找到此错误
- if-statement - else if (!*p) 在这段代码中是什么意思
- botframework - 未捕获的类型错误:无法读取未定义的属性“renderWebChat”
- tabs - 赛普拉斯 - 无法打开指向新选项卡的按钮链接
- javascript - 在选定的 html 周围添加标签
- python - 如何查找值属于哪一行和哪一列?