SVG学习日志-入门

SVG学习日志-入门

在此,先引用W3C教程中的一段话,

与其他图像格式相比，使用 SVG 的优势在于：

• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准

• SVG 文件是纯粹的 XML

  SVG的主要竞争者是Flash。
  与Flash相比，SVG最大的优势是与其他标准（比如XSL和DOM）相兼容。
  而 Flash则是未开源的私有技术。
  

  不知道前面这段话是什么时候写的，个人认为现在SVG的主要竞争者已经从Flash转变成了Canvas,Flash已经逐渐的退出了这场竞争。

---

SVG

SVG是可缩放的矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML的，用于描述二维矢量图形的一种图像格式。

浏览器支持情况：

目前除IE（Internet Explorer）浏览器以外，其他的浏览器都可支持SVG，IE9.0版本（在IE9-10环境中SVG貌似存在一些坑，各位可以自行体验）开始支持SVG，对SVG支持最好的是Opera浏览器

SVG的使用

<svg width="1000" height="500">
    /** 矩形
     * rect 元素的 width 和 height 属性可定义矩形的高度和宽度
     * style 属性用来定义 CSS 属性
     * CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
     * CSS 的 stroke-width 属性定义矩形边框的宽度
     * CSS 的 stroke 属性定义矩形边框的颜色
     */
    <rect  width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    /** 圆形
     * cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
     * r 属性定义圆的半径。
     */
    <!--<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>-->
    /** 椭圆
     * cx 属性定义圆点的 x 坐标
     * cy 属性定义圆点的 y 坐标
     * rx 属性定义水平半径
     * ry 属性定义垂直半径
     */
    <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
    /**
     * 画线
     * x1 属性在 x 轴定义线条的开始
     * y1 属性在 y 轴定义线条的开始
     * x2 属性在 x 轴定义线条的结束
     * y2 属性在 y 轴定义线条的结束
     */
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
    /**
     * points 属性定义多边形每个角的 x 和 y 坐标
     */
    <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
    /**
     * points 属性定义折线每个转折点的 x 和 y 坐标
     * fill: 折线是否填充颜色（起点、终点自动连线补充）
     */
    <polyline points="0,0 0,20 20,20 20,40 40,40 100,10" style="fill:red;stroke:yellowgreen;stroke-width:2"/>
    /**
     * M = moveto 起点
     * L = 直线
     * H = 竖线（仅需一个参数，两个参数时自动转换为两个参数的和，在此不做举例）
     * V = 横线（仅需一个参数，两个参数时自动转换为两个参数的和，在此不做举例）
     * Z = 闭合（绘制闭合图形，如不添加则只绘制线段）
     * */
    <path style="fill:none;stroke: black;" d="M250 150 L150 350 L350 350 L400 150 " />
    /**
     * C = 曲线（每两个数字一组，前两组数字为曲线控制点，第三组为曲线终点）
     */
    <path style="fill:green;stroke:wheat" d="M153 334
        C153 334 151 334 151 334
        C151 339 153 344 156 344
        C164 344 171 339 171 334
        C171 322 164 314 156 314
        C142 314 131 322 131 334
        C131 350 142 364 156 364
        C175 364 191 350 191 334
        C191 311 175 294 156 294
        C131 294 111 311 111 334
        C111 361 131 384 156 384
        C186 384 211 361 211 334
        C211 300 186 274 156 274" />
</svg>
path还有S、Q、T、A等命令，由于没有涉及顾不做解释。（-。-）其实就是自己没看明白！！

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

---

啦啦啦！！！就写到这里吧！什么滤镜！什么高斯滤镜什么的！！！！下次再说吧！！！！
（目前用不着O.O，下次需要用再说吧！）