基於svg.js可編輯影象中的文字換行
阿新 • • 發佈:2019-02-05
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的值則會
var text = draw.text(function(add) {
add.tspan('第一行').newLine()
add.tspan('第二行').newLine().dx(20)
add.tspan('第三行').newLine().dy(20)
})