svg初学——形状

矩形

1. rect 标签

   • 该标签可用来创建矩形，以及矩形的变种
   • 例子

   
   
   <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/>
   svg>

   注释：

   • 从左侧20处，顶端20处开始
   • rx、ry使矩形产生圆角
   • 设置rect元素250宽，100高
   • 红色填充,颜色也可以用rgb
   • 黑色描边，边的宽度为5
   • 整体透明度为0.5；也可以
     
fill-opacity:0.1;
stroke-opacity:0.9;

     这样分开写

圆形

1. circle标签可用来创建一个圆

2. 例子

   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

   注释：

   • 其余部分同上
   • x坐标从100，y坐标从50，半径是40
   • 如果省略cx cy，自动为0 0

椭圆

1. ellipse标签 与圆不同之处在于有不同的x、y半径

2. 例子

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

   注释：rx水平半径，ry垂直半径

线条

1. line标签 创建线条

2. 例子

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

   注释：x1 y1表示线条起点坐标，x2 y2表示终点坐标

多边形

1. polygon标签 创建含有不少于三个边的图形

2. 例子

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

   注释：points表示每个角的坐标

折线

1. ployline标签 创建仅包含直线的形状

2. 例子

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

   注释：points表示每个拐角处的坐标，包括起点和终点；fill表示起点和终点连起来和折线构成的封闭区域，默认为黑色

路径

1. 标签path
2. 下面的命令可用于路径数据
   
   • M = moveto 路径起始点坐标
   • L = lineto 当前节点到指定(x,y)节点，直线连接
   • H = horizontal lineto y坐标不变，x轴移动到x, 形成水平线
   • V = vertical lineto x坐标不变，y轴移动到y, 形成垂直线
   • C = curveto 三次贝塞尔曲线
     
     • C x1 y1, x2 y2, x y
     • 前两个是控制点，是看不见的。第三个是曲线到达的终点，即虚虚实。
   • S = smooth curveto 光滑三次贝塞尔曲线
     
     • S x2 y2, x y
     • 因为会根据前面C中的第二个控制点自动对称补全一个控制点
     • 称作 厕所大仙
   • Q = quadratic Belzier curve 二次贝塞尔曲线
     
     • Q x1 y1, x y
     • 第一个是控制点
   • T = smooth quadratic Belzier curveto 光滑二次贝塞尔曲线
     
     • Q x y
     • 同光滑3次一样
     • 称作切图大仙
   • A = elliptical Arc 椭圆弧
   • Z = closepath 将路径的开始和结束点用直线连接
     注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

3. 例子

   <path d="M153 334
   C153 334 151 334 151 334
   C151 339 153 344 156 344
   C164 344 171 339 171 334
   C171 322 164 314 156 314
   C142 314 131 322 131 334
   C131 350 142 364 156 364
   C175 364 191 350 191 334
   C191 311 175 294 156 294
   C131 294 111 311 111 334
   C111 361 131 384 156 384
   C186 384 211 361 211 334
   C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/>

   path中贝塞尔曲线的学习