bugfix> javascript > 投稿

新しい行ごとに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要素としてある必要があります。すべての千鳥線は右から左に流れるはずです。

回答 1 件
  • ちょっとハッキーなソリューションを見つけました(等幅フォントでのみ動作します):

    <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%正確ではありませんが、それは私の目的を十分に果たします。誰かがより良い(おそらくよりハッキングの少ない)解決策を見つけたら教えてください。

あなたの答え