SVG学习篇一

［学习编程一概用EditPlus编写！将基础打扎实！希望自己可以比较深入了解这个技术！］
｛一定要将理论学扎实了才能真正写出高水平的代码呀！｝
｛深入学习一下理论知识非常有用的！｝


注意：一定要在http-equiv meta标记中包括一个charset属性，以弥补XML prolog中缺失的encoding属性。


虽然doctype被许多人忽视，但在遵循标准的任何Web文档中，它都是一项必需的元素。doctype会影响代码验证，并决定了浏览器最终如何显示你的Web文档。
doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。

假如文档中的标记不遵循doctype声明所指定的DTD，这个文档除了不能通过代码校验之外，还有可能无法在浏览器中正确显示。对于标记不一致的问 题，浏览器相较于校验器来说更宽容。但是，不正确的doctype声明经常导致网页不正确显示，或者导致它们根本不能显示。

完全可以从头编写一个doctype声明，并让它指向自己选择的一个DTD。然而，由于大多数Web文档都需要遵循由W3C发布的某个国际公认的Web标准，所以那些文档通常都要包含以下标准doctype声明之一：

HTML 2：

HTML 3.2：

HTML 4.01 Strict：

"">

HTML 4.01 Transitional：

"">

HTML 4.01 Frameset：

 

"">

XHTML 1.0 Strict：

"">

XHTML 1.0 Transitional：

"">

XHTML 1.0 Frameset：

"">

XHTML 1.1：

"">

XHTML 1.1 plus MathML plus SVG：

"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"">

使用DW制作网页的时候会自动出现了这样的代码出来了！

"">

　　这个是DW自动在网页文件页增加了DTD信息，可以删。 删除后，浏览器会使用的默认DTD。

2.SVG入门一个最简单的SVG例子

我在IE下面测试了可以哈哈。感觉SVG好好玩哦！好好学习一下！争取能够拿来作图用吧！

以下是我写的简单的代码：

  "">

 
    
     I like Svg
 

第三行以后的部分是SVG文档的主体部分,所有图形元素都包括在这一部分。熟悉HTML的朋友应该对这几行代码很容易理解,它们的语法和html语言有很多共通之处。首先是根元素和 ,分别出现在SVG文档内容的开头和结尾。

事实上,你还可以用很多类似于HTML语言中的标签一样的元素来画出更出色的东西,也可以象Flash一样做动画,SVG的强大功能将使你的想象变为现实!

[美呀！居然还可以制作动画效果哦哈哈！]

点评：

SVG代码中的头也即DTD声明位置应该要放：

  "">

直接粘贴过来就OK了非常方便的！

4. 什么是DOM?以及DOM的结构和接口

SVG同样支持DOM，这也就意味着可以在使用了SVG图像的网页中，通过插入Script语句的方法来控制SVG图像的各种属性，从而达到灵活的动态效果。SVG中几乎所有的元素都可以通过DOM接口被外界使用

5. 什么是SVG坐标系?

载体的尺寸虽不确定，但渲染的动作总是在此载体的一个确定的矩形中发生的，这个确定的矩形叫做“视口。

视口的属性与具体设备无关，所以在SVG的解释程序渲染一个SVG图像之前，先要通过与具体设备的交互通讯来确定视口的尺寸和参数，一般像素所代表的具体尺寸如多少毫微米等。只有这样，SVG客户端的解释程序才能将一个SVG文件转换成具体设备上的图像。

SVG客户端的解释程序获得以上信息后，首先初始化视口，建立以像素为长度单位的视口坐标系，接着建立用户坐标系以使两者一致，也就是使用户坐标每吨的一个单位等于视口坐标系中的一个像素。

SVG还有一个功能，即可以定义自己的坐标系。其方法是在一段SVG文本中定义一种叫做变换(Transformation)的格式，其含义类似于解析几何中的坐标变换和映射规则。变换的标式中说明了此变换所作用的对象应该使用什么方式进行平移、缩放、旋转、倾斜等。变换提供了一种整体的方式，用它可对一个或一组图像对象进行变换，改变其比例、位置、形状等，以达到使用自定义坐标系的目的。

6.SVG与图形图像及SVG图片调用

XML文档一般传送的是文字信息或数据，极少有图像，即使有也不提供什么功能，到多像HTML中的标记那样用来插入一个图并限定其高和宽。而SVG的矢量图描绘规则提供了关于矢量图和点阵图的众多结构化的描述，既可单独存在，也可以嵌入XML文档中，形式相当灵活。

xlink:href="http://www.chinasvg.com/templates/chinared/images/logo_small.gif">

在一个SVG文件中内嵌了一个IMG图片过来类似于IMG标签处理一样的！

7. SVG中文名称：可升级矢量图形

8. SVG坐标系统与SVG坐标变换

当首次访问文档时，用户代理（在大多数情况下，即浏览器）确定图像的观察口。观察口是文档实际可见的部分并且由一个坐标系统组成，该坐标系统以左上角的点（0，0）为原点，其正的 x 轴向右而正的 y 轴向下。坐标系统中的一个像素对应观察口中的一个像素

不过可以通过向文档添加另一个 元素来直接创建新的坐标系统

考虑下面的示例：具有相同 x 和 y 属性的同一元素在不同的位置显示，这是因为第二个元素实际上属于另一个坐标系统，它从第一个元素偏移 100 个像素：

［学数学的人就是好：哈哈］

相同的位置的两个元素却可以在不同的位置显示出来的！自己定义了新的坐标系统了！

可以定义不同的坐标出来导致了不同的显示位置了哦！

执行变换改变了元素所在的坐标系统，改变了它的外观。变换可以用来以数种方式改变元素的外观：

• translate(x,y)：该变换按指定数量偏移元素。
• scale(x, y)：该变换更改元素的大小。可以分别控制 x 和 y 方向上缩放量，但如果只指定一个值，那么它将用于两个方向。
• rotate(n)：该变换按指定的角度旋转元素。
• skewX(n)/ skewY(n) ：这两种变换根据适当的轴按指定的像素数量偏斜元素。

变换是累积的，并且既可以指定为单个变换属性的一部分也可以指定为嵌套元素的一部分
就是正在变换的是实际坐标系统
：其实元素没有进行变换的呀！
9. SVG与Flash技术
换句话说，SVG就是用来解决网页上图性及动画呈现的新技术！哈哈美得很呀。以后开发前台美工直接 用了！
或许这就是自己要深入研究的一个技术呀！
经常去关注这方面的技术吧！相当地好用哦！好好研究研究吧！