o'Reill的SVG精髓（第二版）学习笔记——第一章

1.1图形系统

计算机中描述图形信息的两大系统是栅格系统（raster graphics）和矢量图形（vector graphics）

1.1.4矢量图形的用途

①计算机辅助绘图（CAD）程序。

②设计用于高分辨率打印图形的程序，如Adobe Illustrator

③Adobe PostScript打印和成像语言，打印的每个字符都用直线和曲线来描述。

④基于矢量图形的Macromedia Flash系统，用来设计动画、演示和网站。

1.3 SVG的应用：在web中，许多浏览器都原生支持SVG，而且SVG具有很多与HTML中CSS样式相同的变换和动画能力。由于SVG文件就是XML，因此其中的文本可以被使用任何能够解析XML的用户代理读取显示。

绘制一个简单的图像

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="140" height="170" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<des>Stick Figure of a Cat</des>
<!-- 在这里绘制图像 -->
<!-- 圆形 -->
<circle cx="70" cy="95" r="50" style="stroke:black;fill:none;" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="whiskers">
    <line x1="75" y1="95" x2="135" y2="85" style="stroke:black;" />
    <line x1="75" y1="95" x2="135" y2="105" style="stroke:black;" />
</g>
<!-- 复用右侧胡须,转换为左侧胡须 -->
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
<!-- 耳朵 -->
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke:black;fill:none;" />
<polyline points="35 110,45 120,95 120,105,110" style="stroke:black;fill:none;" />
<!-- 使用path绘制鼻子 -->
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke:black;fill:#ffcccc" />
<!-- 移动到坐标(75,90)。绘制一条到坐标（65,90）的直线。然后以x为半径为5、y半径为10绘制一个椭圆，最后回到坐标（75,90）处。 -->
<text x="55" y="165" style="font-family:sans-serif;font-size:14pt;stroke:none;fill:black;">Cat</text>
</svg>

<circle>元素来绘制猫的脸部。这个元素的属性指定中心点x坐标和y坐标以及半径。点（0,0）为图像的左上角。水平向右移动时x坐标增大，垂直向下移动时，y坐标增大。

填充（fill）和轮廓画笔颜色（stroke）也可以写在两个单独的属性中，而不是全部写在style属性中。

胡须：右侧胡须可以作为一个部件，所以把他们包装在分组元素<g>里面，然后给它一个id。可以通过指定起点和终点x坐标和y坐标（分别为x1和y1以及x2和y2）的方式绘制一条直线。

可以使用<use>复用胡须分组并将它变化（transform）为左侧胡须。首先在scale变换中对x坐标乘以-1，翻转了坐标系统。这意味着原始坐标系统中的点（75,95）现在位于（-75,95）。在新的坐标系统中，向左移动会是坐标增大。就是必须将坐标系统向右translate（平移）140个像素（负值），才能将它们移到目标位置。

使用<polyline>元素构建嘴巴和耳朵，元素接受一堆x和y坐标作为points属性的值。可以根据喜好使用空格或者逗号分隔这些数值。

路径<path>元素被设计用来以尽可能简洁的方式指定路径或者一系列直线和曲线。

<text>元素中，x和y属性用于指定文本的位置，它们也是结构的一部分。