标签：svg
SVG画简易小猫咪：第一幅图是别人的，图2是自己画的
-----------------------------分割线----------------------------
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>好玩的SVG---可爱的小猫咪</title>
</head>
<body>
<!--SVG-小猫咪-->
<svg width="200" height="200">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<!--画猫咪脸轮廓-->
<circle cx="100" cy="95" r="50" style="stroke: black; fill: none;" />
<!--画猫咪脸两只眼睛-->
<circle cx="85" cy="80" r="5" stroke="black" fill="#008B8B" />
<circle cx="115" cy="80" r="5" stroke="black" fill="#008B8B" />
<!--画出右侧胡子，折线-->
<g id="whiskers">
<line x1="105" y1="95" x2="165" y2="85" style="stroke: black;" />
<line x1="105" y1="95" x2="165" y2="105" style="stroke: black;" />
</g>
<!--根据右侧胡子画左侧胡子-->
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-200 0)" />
<!-- ears -->
<polyline points="138 62, 150 10, 100 45, 50 10, 62, 62"
style="stroke: black; fill: none;" />
<!-- mouth1 -->
<!--
<polyline points="65 110, 75 120, 125 120, 135, 110"
style="stroke: black; fill: none;" />
-->
<!-- mouth2 -->
<path d="M70 115 C95 130,110 130,130 115" fill="none" stroke="blue" stroke-width="5"/>
<!-- nose -->
<path d="M 105 90 L 95 90 A 5 10 0 0 0 105 90"
style="stroke: black; fill: #ffcccc" />
</svg>
</body>
</html> 说明：
下面是每个形状的使用说明(这里只介绍控制图形形状和位置的基本属性，填充等属性放到后面总结)。
矩形 - rect元素
这个元素有6个控制位置和形状的属性，分别是：
x：矩形左上角的坐标(用户坐标系)的x值。
y：矩形左上角的坐标(用户坐标系)的y值。
width：矩形宽度。
height：矩形高度。
rx：实现圆角效果时，圆角沿x轴的半径。
ry：实现圆角效果时，圆角沿y轴的半径。
比如上面例子中，实现了圆角效果，你也可以通过设置rx,ry为不同的值实现椭圆角效果。
圆 - circle元素
这个元素的属性很简单，主要是定义圆心和半径：
r：圆的半径。
cx：圆心坐标x值。
cy：圆心坐标y值。
<span style="color:#cc0000;">椭圆 - ellipse元素</span>
这个是更加通用的圆形元素，你可以分别控制半长轴和半短轴的长度，来实现不同的椭圆，很容易想到，当两个半轴相等时，就是正圆形了。
rx：半长轴(x半径)。
ry：半短轴(y半径)。
cx：圆心坐标x值。
cy：圆心坐标y值。
直线 - line元素
直线需要定义起点与终点即可：
x1：起点x坐标。
y1：起点y坐标。
x2：终点x坐标。
y2：终点y坐标。
折线 - polyline元素
折线主要是要定义每条线段的端点即可，所以只需要一个点的集合作为参数：
points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。
多边形 - polygon元素
这个元素就是比polyline元素多做一步，把最后一个点和第一个点连起来，形成闭合图形。参数是一样的。
points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。
路径 - path元素
这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：
d：一系列绘制指令和绘制参数(点)组合成。
绘制指令分为绝对坐标指令和相对坐标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，坐标也是绝对坐标；相对指令使用对应的小写字母，点的坐标表示的都是偏移量。
绝对坐标绘制指令：
这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0)，则下面的绝对坐标指令代表的含义如下所示：
指令 参数 说明
M x y 将画笔移动到点(x,y)
L x y 画笔从当前的点绘制线段到点(x,y)
H x 画笔从当前的点绘制水平线段到点(x,y0)
V y 画笔从当前的点绘制竖直线段到点(x0,y)
A rx ry x-axis-rotation large-arc-flag sweep-flag x y画笔从当前的点绘制一段圆弧到点(x,y)
C x1 y1, x2 y2, x y画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S x2 y2, x y
特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q x1 y1, x y 绘制二次贝塞尔曲线到点(x,y)
T x y 特殊版本的二次贝塞尔曲线(省略控制点)
Z 无参数 绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。
总结：
移动画笔指令M，画直线指令：L，H，V，闭合指令Z都比较简单；下面重点看看绘制曲线的几个指令。
附链接： http://www.tuicool.com/articles/Jzmaeq
标签：svg
原文地址：http://blog.csdn.net/tto_ott/article/details/44521733
