SVG.js 文本繪制整理

1.SVG.Text

var draw = SVG('svg1').size(300, 300);
//畫文字內容展示
//var text = draw.text('中文內容測試\n換行處理');
var text2 = draw.text(function (add) {
    //添加span元素包裹的文字
    add.tspan('中文內容').newLine(); //指定當前內容開啟新的一行，第一行一般都需要
    add.tspan('換行1').fill('#f06').newLine();
    add.tspan('.');
    add.tspan('換行2').newLine().dx(20);
    add.tspan('換行3').newLine();
});
//獲取當前text的長度
var length = text2.length(); //191.140625
console.info(length);
//獲取或這是文本內容
var txt = text2.text();
console.info(txt);
text2.text('修改后的內容'); //會覆蓋已有的內容
//為text添加span元素 ,返回SVG.tspan
var span = text2.tspan('on a train...'); //會覆蓋已有的內容
span.fill('red').newLine();
//清空text的內容
text2.clear();

 

var draw = SVG('svg1').size('100%', 300);
//畫文字的格式
var text = draw.text('中文測試內容');
//獲取或設置font
text.font({
    family: 'Helvetica',
    size: 24,
    anchor: 'middle', //設置位置的相對定位點
    leading: '1.5em'
});
text.move(100,100);
var font=text.font();
console.info(font);

//獲取或設置leading,似乎沒起作用
text.leading(1,3);
text.lines();
text.plain('中文測試');//設置純文本內容

//重新建立文本輸入,追加內容 ，使用build()
text.build(true);
var tspan = text.tspan('something pink in the middle ').fill('#00ff97');
text.plain('and again boring at the end.');
text.build(false) // disables build mode
tspan.animate('2s').fill('#f06').loop(true, true);
//清空重置內容、動畫等
text.rebuild(true);

//更多擴展
// leading (will do the same as calling the leading() method as setter)
// anchor (will set the text-anchor attribute)
// family (will set the font-family attribute)
// size (will set the font-size attribute)
// stretch (will set the font-stretch attribute)
// style (will set the font-style attribute)
// variant (will set the font-variant attribute)
// weight (will set the font-weight attribute)

2.SVG.Tspan

var draw = SVG('svg1').size('100%', 300);
//SVG.Tspan 添加span元素
var text = draw.text('測試');
var span = text.tspan('http://www.gongjuji.net');
//開啟新的一行
span.newLine();
//設置文本位置 dx dy
span.dx(100).dy(100);
//獲取span 的長度（注：不是字數）
var length = span.length(); //160.09375
console.info(length);
//追加純文本
span.plain('中文測試文本');

//獲取或追加內容
//span.text('Just a string.');
span.text(function (add) {
    add.plain(' 新行1');
    add.tspan('》其他內容').fill('red');
});
//追加子的span元素
span.tspan('abc').fill('blue');
//清空文本
//span.clear();

3. SVG.TextPath 

var draw = SVG('svg1').size('100%', 700);
//設置文本路徑
var text = draw.text(function (add) {
    add.tspan('We go');
    add.tspan('up').fill('#f09').dy(-40);
});
//設置路徑
var 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';
text.path(path).font({
    size: 42.5,
    family: 'Verdana'
});
//修改文本路徑
text.plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100');
//獲取textPath() 對象
var textPath = text.textPath();
textPath.attr('startOffset', '50%');
//路徑使用動畫
textPath.animate(3000).attr('startOffset', '80%').loop(true, true);
// //獲取數組點，SVG.PathArray ----測試不可用
// var array1=text.textPath().array();
// console.info(array1);
var path2 = text.track();
//console.info(path2);

//綁定事件 rebuild
text.on('rebuild', function () {
    //獲取當前text的內容
    var content = text.text();
    console.info(content);
});
//text.rebuild(true);
text.build(true);
text.tspan('中文內容').fill('blue');

 

更多：

SVG.js 基礎圖形繪制整理（二）

SVG.js 基礎圖形繪制整理（一）

Svg.Js 父類的基礎操作