svg.js：水平偏移换行 tspan 以创建交错外观答案

【问题标题】：svg.js: horizontally offset newline tspans to create staggered appearancesvg.js：水平偏移换行 tspan 以创建交错外观
【发布时间】：2018-05-25 12:47:06
【问题描述】：

是否有适当的方法在每个新行中水平偏移 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 元素，以便我以后可以添加水平流动动画。然后所有交错的线应该从右向左流动。

【问题讨论】：

当使用 newLine 命令时，您基本上是将线路管理交给 svg.js。你想要的是使用 dy 来抵消你的线，例如add.tspan(sentences[i]).dy(offset)

标签： javascript jquery html css svg.js

【解决方案1】：

找到了一个 hacky 解决方案（仅适用于等宽字体）：

已将<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% 准确，但它足以满足我的目的。让我知道是否有人找到了更好（也许不那么老套）的解决方案。

【讨论】：