svg绘制简单图形

网页开发过程中我们会经常使用svg绘制图形,svg具有非常强大的图形构建能力。

SVG 有一些预定义的形状元素,可被开发者使用和操作:
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>


(1)<rect> 标签可用来创建矩形,以及矩形的变种。

<?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">
    <rect width="300" height="100"
          style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/></svg>
上述代码实现了绘制一个长300,宽100,的矩形,style属性为矩形填充样式和颜色,设置边框属性等。


(2)<circle> 标签可用来创建一个圆。

<?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">

    <circle cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red"/>
</svg>
上述代码实现了绘制一个坐标在(100,50)处,半径为40的圆,边的宽为2,圆内填充红色。


(3)<ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的。

 <?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">

        <ellipse cx="300" cy="150" rx="200" ry="80"
                 style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

    </svg>
上述代码实现了绘制一个坐标在(300,150)处,横半径为200,纵半径为80的椭圆。


(4)<line> 标签用来创建线条。

<?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">

    <line x1="0" y1="0" x2="300" y2="300"
          style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>
上述代码实现了绘制一个初始点为(0,0),终点为(300,300)的直线。


(5)<polyline> 标签用来创建仅包含直线的形状。

<?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">

    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
              style="fill:white;stroke:red;stroke-width:2"/>

</svg>
上述代码实现了绘制一条折线段。


(6)<polygon> 标签用来创建含有不少于三个边的图形。

<?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">

    <polygon points="220,100 300,210 170,250"
             style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>

上述代码实现了一个三角形的绘制。


(7)下面的命令可用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

<?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">

    <path d="M250 150 L150 350 L350 350 Z" />

</svg>

上面的例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。


上面是对svg基本图形绘制的一些总结,svg还有许多知识需要我们深入去学习和研究。



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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值