SVG学习笔记

一、什么是SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

二、SVG实例

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

SVG 的 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。
r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

三、SVG Shapes

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

四、SVG 矩形 - <rect>

<svg>    <rect x="50" y="20" rx="20" ry="20" width="300" height="100" fill="red" stroke-width="2" stroke="black" fill-opacity="0.3" stroke-opacity="0.2"/></svg>

x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）
width 和 height 属性可定义矩形的高度和宽度
fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
stroke-width 属性定义矩形边框的宽度
stroke 属性定义矩形边框的颜色
fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
rx 和 ry 属性可使矩形产生圆角

五、SVG 圆形 - <circle>

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

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

六、SVG 椭圆 - <ellipse>

<svg>    <ellipse cx="109" cy="80" rx="100" ry="50" fill="yellow" stroke="purple" stroke-width="2"/></svg>

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

七、SVG 直线 - <line>

<svg>    <line x1="0" y1="0" x2="200" y2="200"stroke="red" stroke-width="2"/></svg>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

八、SVG 多边形 - <polygon>

<svg>    <polygon points="200,10 250,190 160,210 80,70" fill="yellow" stroke="purple" stroke-width="2"/></svg>

points 属性定义多边形每个角的 x 和 y 坐标

九、SVG 曲线 - <polyline>

<svg>    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180 500,90" fill="none" stroke="purple" stroke-width="5" /></svg>

十、SVG 路径 - <path>

<path> 元素用于定义一个路径。
下面的命令可用于路径数据：

元素 描述 语法 M=moveto 出现在路径的开始处，用来指明从何处开始画 M x y或m dx dy L=lineto 在当前位置和新位置（L前面画笔所在的点）之间画一条线段 L x y或l dx dy H=horizontal lineto 绘制平行线 H x或h dx V=vertical lineto 绘制垂直线 V y或v dy Z=closepath 闭合路径 Z或z C=curveto 创建三次贝塞尔曲线 C x1 y1, x2 y2, x y或c dx1 dy1, dx2 dy2, dx dy最后一个坐标(x,y)表示的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点 S=smooth curveto 一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变），一个简写的贝塞尔曲线命令S S x2 y2, x y或s dx2 dy2, dx dy Q=quadratic Bézier curve 二次贝塞尔曲线，一个控制点，用来确定起点和终点的曲线斜率 Q x1 y1, x y或q dx1 dy1, dx dy T=smooth quadratic Bézier curveto 只定义终点，就创建出一个相当复杂的曲线。T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。 T x y或t dx dy A=elliptical Arc 弧形命令 A rx ry x-axis-rotation large-arc-flag sweep-flag x y或a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg>  <path d="M150 0 L75 200 L225 200 Z" /></svg>

开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。

①M

<svg width="900" height="900" >    <path d="M30 30"/>    <circle cx="30" cy="30" r="2" fill="red" /></svg>

②MLHV

<svg width="900" height="900" >    <path d="M10 10 H 90 V 90 H 10 L 10 10"/></svg>

③Z 不区分大小写

<svg width="900" height="900" >    <path d="M10 10 H 90 V 90 H 10 z" fill="transparent" stroke="black"/></svg>

④C

<svg>  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/></svg>

⑤S

<svg>  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/></svg>

⑥Q

<svg>  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/></svg>

⑦T

<svg>  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/></svg>

⑧ A

<svg>  <path d="M10 315           L 110 215           A 30 50 0 0 1 162.55 162.45           L 172.55 152.45           A 30 50 -45 0 1 215.1 109.9           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/></svg>

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx x轴半径
ry y轴半径
x-axis-rotation x轴旋转角度
large-arc-flag 角度大小，决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧
sweep-flag 弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧

<svg>  <path d="M80 80           A 45 45, 0, 0, 0, 125 125           L 125 80 Z" fill="green"/>  <path d="M230 80           A 45 45, 0, 1, 0, 275 125           L 275 80 Z" fill="red"/>  <path d="M80 230           A 45 45, 0, 0, 1, 125 275           L 125 230 Z" fill="purple"/>  <path d="M230 230           A 45 45, 0, 1, 1, 275 275           L 275 230 Z" fill="blue"/></svg>

十一、SVG 文本 - <text>

<svg>  <text x="100" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text></svg>

x横坐标
y纵坐标
rotate用来使目标对象绕一点旋转一定的角度。rotate([angle] [px,py])
- [angle] : 旋转角度。 由于屏幕坐标和数学坐标的Y轴相反，所以向左旋转为正角度值。
- [px,py] : 旋转的中心点。参数缺省默认为圆点（0,0）。

<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。

<svg>  <defs>    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />  </defs>  <text x="10" y="100" style="fill:red;">    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>  </text></svg>

元素可以安排任何分小组与 元素的数量。每个 元素可以包含不同的格式和位置。几行文本(与 元素):

<svg width="900" height="900">  <text x="10" y="20" style="fill:red;">Several lines:    <tspan x="10" y="45" fill="green">First line</tspan>    <tspan x="10" y="70">Second line</tspan>  </text></svg>

十二、SVG Stroke 属性

stroke文本或元素轮廓颜色
stroke-width文本或元素轮廓厚度
stroke-linecap不同类型的开放路径的终结
stroke-dasharray创建虚线

<svg>  <g fill="none" stroke="black" stroke-width="20">    <path stroke-linecap="butt" d="M10 20 l215 0" />    <path stroke-linecap="round" d="M10 60 l215 0" />    <path stroke-linecap="square" d="M10 100 l215 0" />  </g>    <path stroke="white" d="M10 20 l215 0 M10 60 l215 0 M10 100 l215 0"/></svg>

<svg width="900" height="900">  <g fill="none" stroke="black" stroke-width="4">    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />  </g></svg>

十三、SVG <feGaussianBlur>高斯模糊

<svg height="900" width="900">        <filter id="xxx">            <feGaussianBlur in="SourceGraphic" stdDeviation="2" />        </filter>        <circle cx="60" cy="60" r="30" fill="green" />        <circle cx="150" cy="60" r="30" fill="green" filter="url(#xxx)" />    </svg>

<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<circle>元素的滤镜属性用来把元素链接到”xxx”滤镜