svg之text

svg里面的text标签用来定义文本,看下面的效果:

image.png

怎么实现的呢?我们先编写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标签的属性都可以,我在上边也演示了上边的两种写法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值