SVG 学习（一）

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。

什么是SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 的历史和优势

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

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

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

SVG 的主要竞争者是 Flash。

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

查看 SVG 文件

今天，所有浏览器均支持 SVG 文件，不过需要安装插件的 Internet Explorer 除外。插件是免费的，比如 Adobe SVG Viewer。

以上说明来源于w3c

接下来开始正式进入svg学习.........................

1、首先看一个例子svg圆和文字的创建

<!--svg圆和文字-->
    <svg id="diag" width="400" height="400" style="border:1px solid #000;">
        <circle cx="50" cy="50" r="50"/>
        <text y="100" x="100" font-family="Arial" font-size="60px" fill="#f00" text-anchor="left">
            SVG 文本
        </text>
    </svg>

2、SVG 绘制矩形

<svg width="200" height="200">
        <rect x="10" y="10" width="100" height="100" stroke="red" fill="#ccc" />
    </svg>

    stroke="red" 红色边框  fill="#ccc"灰色填充色

3、SVG 绘制圆形

 <svg width="200" height="200">
        <rect x="10" y="10" width="100" height="100" stroke="red" fill="#ccc" />
        <circle cx="50" cy="50" r="40" stroke="#00f" fill="none" stroke-width="8"/>
    </svg> 

        cx="50" 圆心的x坐标值
        cy="50" 圆心的y坐标值
        r="40"  圆的半径
        fill="none"  不添加填充
        stroke-width="8" 边框宽度为8
        stroke="#00f"  边框颜色

4、svg的变换

<svg width="200" height="200">
        <g transform="translate(60,0) rotate(30) scale(0.75)" id="sh_group">
            <rect x="10" y="10" width="100" height="100" stroke="#ccc" fill="#ccc"/>
            <circle cx="100" cy="100" r="40" stroke="#f00" fill="none" stroke-width="5"/>
        </g>
    </svg>

        <g></g>  代表一个组，可以将多个元素结合起来
        transform：变换
        translate(60,0) 平移到60x 0y
        rotate(30)  旋转30度
        scale(0.75) 缩放到之前的0.75倍

5、svg复用内容

<svg width="200" height="200">
        <defs>
            <g id="sh_group">
                <rect x="10" y="10" width="100" height="100" stroke="#ccc" fill="#ccc"/>
                <circle cx="100" cy="100" r="40" stroke="#f00" fill="none" stroke-width="5"/>
            </g>
        </defs>
        <use xlink:href="#sh_group" transform="translate(60,0) rotate(30) scale(0.75)"/>
        <use xlink:href="#sh_group" transform="translate(120,80) rotate(30) scale(0.45)"/>
        <use xlink:href="#sh_group" transform="translate(20,60) rotate(30) scale(0.25)"/>
    </svg> 

        defs 用于定义留待将来使用的内容。
        use 用来链接到defs元素定义的内容。
    

6、为矩形和圆形添加纹理

 <svg width="200" height="200">
        <defs>
            <pattern id="grap" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
                <image x="0" y="0" width="100" height="67" xlink:href="https://www.baidu.com/img/bd_logo1.png"></image>
            </pattern>
            <linearGradient id="redBLackGradient">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="100%" stop-color="#f00"></stop>
            </linearGradient>
        </defs>
        <rect width="100" height="80" x="10" y="20" stroke="red" fill="url(#redBLackGradient)"/>
        <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#grap)" />
    </svg> 

        pattern 定义一个待填充的图像
        linearGradient:定义一个渐变
        stop:设置渐变的开始值以及结束值
        fill="url(#redBLackGradient)加载预设的纹理或者渐变

7、svg路径

<svg width="300" height="300">
        <path d="M-25,-50L-10,-80L-20,-80L-5,-110L-15,-110L0,-140L15,-110L5,-110L20,-80L10,-80L25,-50Z" fill="#f00" transform="translate(100,200)" id="can">
        </path>
    </svg> 

        path:自由形态的路径
        d:代表数据
        M:代表moveTo 移动到某一点
        L:代表lineto 划线至
        Q：代表二次曲线
        Z：代表闭合路径

8、svg 二次曲线路径

<svg width="400" height="400">
        <defs>
            <pattern id="gd" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
                <image x="0" y="0" width="100" height="67" xlink:href="https://www.baidu.com/img/bd_logo1.png"></image>
            </pattern>
        </defs>
        <g transform="translate(-10,350)" stroke-width="20" stroke="url(#gd)" stroke-linejoin="round">
            <path d="M0,0Q170,-50 260,-190Q310,-250 410,-250" fill="none">
            </path>
        </g>
    </svg> 
     stroke-linejoin="round":这段代码作用是让二次曲线的接口处变圆滑

9、svg 文本

<svg width="600" height="200">
        <text x="10" y="60" font-family="Arial" stroke="#0ff" font-size="40px" font-weight="bold">
            dfksfgjfgdj
        </text>
    </svg>
定义的方法和css定义基本差不多