natsu_cc

文章简介： 入门章节，主要是分享网上SVG的技术点，整合成一个完整的技术文档，形成一个完整的技术框架，也方便SVG基础差的新人学习。 进阶需要我们进一步去学习研究归纳的内容。

viewPort 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。

transform svg 中的transform可以写在属性中,也可以写在css中，写在css中要遵循css的规则，在这里就不详细去介绍了，这里主要介绍一下svg的transform属性。

前言 由于SVG自身的矢量性质，不管在什么情况下，图标都很清晰，可以适应不同尺寸大小和不用分辨率。不用担心模糊和锯齿。同时还能更改图标的填充颜色。

SMIL SMIL是指同步多媒体集成语言（Synchronized Multimedia Integration Language）

DOM操作 svg看起来是一个整体，但是如果svg代码直接写在HTML页面之中，它就成为页面DOM的一部分，可以直接用DOM操作。

<foreignObject>标签 <foreignObject>是SVG的一个子标签，这个标签中可以用于显示普通的DOM标签。也就是渲染XHTML元素。

前言 SVG动画能够实现和CSS3动画类似的效果，除此之外还能够实现强大的路径动画，也就是使物体按照一定的路径移动。

前言 虽然SVG不是一种位图描述语言，佴它仍然允许我们使用一些相同的工具，比如滤镜。当SVG阅读器程序处理一个图形对象时，它会将对象呈现在位图输出设备上；