1. 程式人生 > >基於svg.js可編輯影象中的文字換行

基於svg.js可編輯影象中的文字換行

    svg中的文字與一般頁面中的文字並不一樣,svg中的文字使用<text></text>標籤來包住文字,所以頁面中文字換行功能無法使用,這時候就要我們自己設定部分屬性來使其換行。
    首先是基本的svg文字這裡寫圖片描述使用一個text標籤包住。

<text id="SvgjsText1008" font-family="宋體" class="board-text" y="162.00" font-size="10.00pt" dy="11" x="91.00">這是第一段文字和第二段文字</text>

如果要分行的話需要在text標籤中新增tspan標籤來分行。

<text id="SvgjsText1008" font-family="宋體" class="board-text" y="154.00" font-size="10.00pt" dy="11" x="134.80">
<tspan id="SvgjsTspan1058" dy="13" x="134.8">這是第一段文字</tspan>
<tspan id="SvgjsTspan1059" dy="13" x="134.8">和第二段文字</tspan></text>

顯示結果如下:這裡寫圖片描述可以正確的分為上下兩段,其中x和dy是必須的,x代表文字開始的x軸位置,dy則代表了文字偏移的位置,dy的值要根據文字的高度來設定,如果不設定x的值則會這裡寫圖片描述

第一段文字和第二段文字雖然分開,但是第二段文字在不設定x的時候會預設在原本的x軸位置,同樣的不設定dy的值的話,文字會在原本行的高度,同時不設定x與dy的話文字雖然包在兩個tspan標籤下,但是實際看起來的效果與沒分行的時候是一樣的。使用方法:由於是基於svg.js的,所以必須引入svg.js,詳見這裡

var text = draw.text(function(add) {
  add.tspan('第一行').newLine()
  add.tspan('第二行').newLine().dx(20)
  add.tspan('第三行').newLine().dy(20)
})