svg里面的text标签用来定义文本,看下面的效果:
怎么实现的呢?我们先编写text.svg:
1 2 3 4 5 6 7 8 | <? xml version = "1.0" standalone = "no" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> < svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg" > < text x = "10" y = "15" fill = "red" style = "transform:rotate(30deg)" >http://www.roadjava.com</ text > < text x = "35" y = "35" fill = "red" transform = "rotate(30)" >lzzcms</ text > </ svg > |
然后再svg.html中使用这个text.svg文档吧:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >svg</ title > </ head > < body > < embed src = "text.svg" width = "400" height = "200" type = "image/svg+xml" pluginspage = "http://www.adobe.com/svg/viewer/install/" /> </ body > </ html > |
使用浏览器打开svg.html即可。
text标签有如下属性:
x:表示文字左下角开始的x坐标,
y:表示文字左下角开始的y坐标
fill:表示文字的填充颜色
dx:文本在水平方向上移动的像素大小
dy:文本在垂直方向上移动的像素大小
text-anchor文本相对基点(x,y)的位置:
start 文字在基点的右上方
middle 文字在基点的正上方
end 文字在基点的左上方
style自然是样式了,通过style来定义样式或者直接把样式写作svg标签的属性都可以,我在上边也演示了上边的两种写法。