1.SVG
1.1<line> 标签
<!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>
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
1.2<rect> 标签
<rect x="10" y="10" width="100" height="100"/>
rect 元素的 width 和 height 属性可定义矩形的高度和宽度,x定义横坐标，y纵坐标
**圆角矩形
<rect x="10" y="10"
width="100" height="100"
rx="15" ry="15"/>
rx 和 ry 属性可使矩形产生圆角。
1.3<circle>标签
<circle cx="60" cy="60" r="50"/>
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0),r 属性定义圆的半径。
1.4<ellipse> 标签
<ellipse cx="300" cy="150" rx="200" ry="80"/>
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
1.5<polygon> 标签
<polygon> 标签用来创建含有不少于三个边的图形。
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
points 属性定义多边形每个角的 x 和 y 坐标
1.6<polyline> 标签
用来创建仅包含直线的形状。
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
1.7<path> 标签
用来定义路径。
<path d="M250 150 L150 350 L350 350 Z" />
上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。
1.8显示文字
<text x="325" y="160" font-size="30" style="fill:white">SVG</text>
x,y是文本开始坐标。
文本主要使用text元素，在text元素中，空格的处理与HTML类似：换行和回车变成空格，而多个空格压缩成单个空格。
1.9画一朵花
<!--画一朵花,圆堆叠形成-->
<!--中心圆 -->
<circle cx="500" cy="150" r="50"
style="fill: #FB9B60;"/>
<!--茎-->
<rect x="500" y="200" width="10" height="150"
style="fill: #11710F;"/>
<!--四个90度的点 -->
<circle cx="500" cy="90" r="10"
style="fill: #FDF979;"/>
<circle cx="440" cy="150" r="10"
style="fill: #FDF979;"/>
<circle cx="560" cy="150" r="10"
style="fill: #FDF979;"/>
<circle cx="500" cy="210" r="10"
style="fill: #FDF979;"/>
<!--左上角四分之一圆的点 -->
<circle cx="444.56" cy="127.03" r="10"
style="fill: #FDF979;"/>
<circle cx="457.57" cy="107.57" r="10"
style="fill: #FDF979;"/>
<circle cx="477.03" cy="94.56" r="10"
style="fill: #FDF979;"/>
<!--右上角四分之一圆的点 -->
<circle cx="555.43" cy="127.03" r="10"
style="fill: #FDF979;"/>
<circle cx="542.42" cy="107.57" r="10"
style="fill: #FDF979;"/>
<circle cx="522.96" cy="94.56" r="10"
style="fill: #FDF979;"/>
<!--右下角四分之一圆的点 -->
<circle cx="555.43" cy="172.96" r="10"
style="fill: #FDF979;"/>
<circle cx="542.42" cy="192.42" r="10"
style="fill: #FDF979;"/>
<circle cx="522.96" cy="205.43" r="10"
style="fill: #FDF979;"/>
<!--左下角四分之一圆的点 -->
<circle cx="444.56" cy="172.96" r="10"
style="fill: #FDF979;"/>
<circle cx="457.57" cy="192.42" r="10"
style="fill: #FDF979;"/>
<circle cx="477.03" cy="205.43" r="10"
style="fill: #FDF979;"/>
<!--向日葵的中间的种子-->
<line x1="453.80" y1="130.86" x2="546.19" y2="130.86"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="450" y1="150" x2="550" y2="150"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="464.64" y1="114.64" x2="535.35" y2="114.64"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="453.80" y1="169.14" x2="453.80" y2="169.14"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="453.80" y1="169.14" x2="546.19" y2="169.14"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="500" y1="100" x2="500" y2="200"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="464.65" y1="185.35" x2="535.35" y2="185.35"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="519.13" y1="103.80" x2="519.13" y2="196.19"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="480.86" y1="103.80" x2="480.86" y2="196.19"
style="stroke:rgb(99,99,99);stroke-width:2"/>
<!--叶子：svg的path是路径绘制,字母M后面的是绘图起点坐标,字母C是curveto选项,其后三个坐标分别是起始控制柄,终止控制柄,以及终点坐标。叶子轮廓代码是:-->
<path d="M510 280 C510 276 550 250 570 230 C570 235 530 250 510 280"
style="fill:#11710F;stroke:#11aa42;stroke-width:1px"/>
curveto的参数
叶子参考
curveto曲线的参数
1.10 画一颗小树
<ellipse cx="700" cy="150" rx="80" ry="100"
style="fill: #11aa42"/>
<polygon points="700,150 640,350 760,350"
style="fill:#79241F;stroke-width:1"/>
网友评论