svg.js:水平偏移换行符以创建交错外观
svg.js: horizontally offset newline tspans to create staggered appearance
是否有适当的方法在每一行中水平偏移 tspan?我想创建一个交错效果,以便所有新行都偏移前一行的宽度,例如:
sentence 1
sentence 2
sentence 3
etc
我必须遵循它给了我一个文本块,其中所有行都从相同的 x 位置开始:
let content = SVG('text-box'); // initialize svg element
let sentences = ["sentence 1", "sentence 2", "sentence 3"];
// create a text block
let text_block = content.text(function (add) {
// create tspans for every sentence
for (let i = 0; i < sentences.length; i++) {
add.tspan(sentences[i]).newLine();
}
});
我知道这很容易用纯 html 和 css 实现,但它必须是 svg 元素,这样我以后可以添加水平流动的动画。所有的交错线应该从右向左流动。
找到了一个有点老套的解决方案(只适用于等宽字体):
已将 <span id="ruler" style="visibility:hidden">x</span>
添加到我的 index.html
let ruler = $('#ruler');
// get pixel length of one char
let char_unit = ruler.width();
let content = SVG('text-box'); // initialize svg element
let sentences = ["sentence 1", "sentence 2", "sentence 3"];
// create a text block
let text_block = content.text(function (add) {
// create tspans for every sentence
let sent_offset = 0;
for (let i = 0; i < sentences.length; i++) {
add.tspan(sentences[i]).newLine().dx(sent_offset); // added x offset
// compute offset depending on length of preceding sentence and ruler value
sent_offset += (sentences[i].length * char_unit);
}
});
它不是 100% 准确,但足以满足我的目的。让我知道是否有人找到更好的(可能不那么老套)解决方案。
是否有适当的方法在每一行中水平偏移 tspan?我想创建一个交错效果,以便所有新行都偏移前一行的宽度,例如:
sentence 1
sentence 2
sentence 3
etc
我必须遵循它给了我一个文本块,其中所有行都从相同的 x 位置开始:
let content = SVG('text-box'); // initialize svg element
let sentences = ["sentence 1", "sentence 2", "sentence 3"];
// create a text block
let text_block = content.text(function (add) {
// create tspans for every sentence
for (let i = 0; i < sentences.length; i++) {
add.tspan(sentences[i]).newLine();
}
});
我知道这很容易用纯 html 和 css 实现,但它必须是 svg 元素,这样我以后可以添加水平流动的动画。所有的交错线应该从右向左流动。
找到了一个有点老套的解决方案(只适用于等宽字体):
已将 <span id="ruler" style="visibility:hidden">x</span>
添加到我的 index.html
let ruler = $('#ruler');
// get pixel length of one char
let char_unit = ruler.width();
let content = SVG('text-box'); // initialize svg element
let sentences = ["sentence 1", "sentence 2", "sentence 3"];
// create a text block
let text_block = content.text(function (add) {
// create tspans for every sentence
let sent_offset = 0;
for (let i = 0; i < sentences.length; i++) {
add.tspan(sentences[i]).newLine().dx(sent_offset); // added x offset
// compute offset depending on length of preceding sentence and ruler value
sent_offset += (sentences[i].length * char_unit);
}
});
它不是 100% 准确,但足以满足我的目的。让我知道是否有人找到更好的(可能不那么老套)解决方案。