研究メモ - SVG.js の textPath 要素と tspan 要素の関連メソッド

テキストパス()

1）テキストパス()

パスに沿ってテキストを構築するには、textPath() コンストラクターを使用できます。

var textpath = draw.textPath('Some Text along a path', 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')

注: 指定された startOffset がパーセンテージでない場合、その値は現在のユーザー座標系で測定されたパスに沿った距離を表します。

2）テキストパス.array()

textPath 要素のパス配列を取得します。

var array = textpath.array()

3）テキストパス.plot()

textpath 要素のパスを変更します。

text.textPath().plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200')

4）テキストパス.テキストパス()

textPath ノードを直接参照します。

var textPath = text.textPath()

5）テキストパス.トラック()

リンクされたパス要素への直接参照:

var path = textpath.track()

注: SVG.TextPath は SVG.Text を継承するため、すべてのメソッドが継承されます。

6) SVG.Textイベント

テキスト要素にはイベントがあります。build() メソッドが呼び出されるたびに起動されます。

text.on('rebuild', function() {
    
    
  // whatever you need to do after rebuilding
})

ツパン()

1）ツパン()

tspan 要素は、テキスト要素または他の tspan 要素内でのみ使用できます。

text.tspan('spannened')

2）tspan.clear()

次のように呼ばれる tspan 要素の内容をすべてクリアします。

tspan.clear()

3）tspan.dx()/dy()

要素の動的な x/y 値を定義します。これは、position:relative と left/top が定義された HTML 要素と同様です。

tspan.dx(30)
tspan.dy(30)

4）tspan.plain()

プレーンテキストを追加するだけです。

tspan.plain('I do not have any expectations.')

5）tspan.length()

計算された合計テキスト長を取得します。

tspan.length()

6）tspan.newLine()f

newLine() は、現在の「先頭」を使用して dy 属性を持つ新しい行を追加するための便利なメソッドです。

var text = draw.text(function(add) {
    
    
  add.tspan('Lorem ipsum dolor sit amet ').newLine()
  add.tspan('consectetur').fill('#f06')
  add.tspan('.')
  add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
  add.tspan('Nunc ultrices lectus at erat').newLine()
  add.tspan('dictum pharetra elementum ante').newLine()
})

7）tspan.text()

tspanの内容を更新します。これは、文字列を渡すことで実行できます。

tspan.text('Just a string.')

基本的には plain() メソッドを呼び出します:
または、ブロックを渡すことで呼び出される tspan にさらに具体的なものを追加します:

tspan.text(function(add) {
    
    
  add.plain('Just plain text.')
  add.tspan('Fancy text wrapped in a tspan.').fill('#f06')
  add.tspan(function(addMore) {
    
    
    addMore.tspan('And you can doo deeper and deeper...')
  })
})

8）tspan.tspan()

ネストされた tspan を追加します。

tspan.tspan('I am a child of my parent').fill('#f06')

9) tspan.remove()

text.amove() と同じ

動画解説

動画解説