svg学习笔记

1. svg标签svg

SVG 代码都放在顶层标签svg之中，可以指定宽高，可使用相对单位和绝对单位，默认300px*150px。还可指定视口大小viewBox（这点还不太理解）。

    <svg width="100%" height="100%" viewBox="50 50 50 50">
        <circle cx="50" cy="50" r="50" />
    </svg>

    svg下标签公共属性：
        stroke：描边色
        stroke-width：边框宽度
        stroke-linecap：定义开放路径的起止点样式(butt\round\square)
        stroke-linejoin：描边转角的表现方式(miter\round\bevel)
        stroke-miterlimit：描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。（不懂）
        stroke-dasharray：用于创建虚线，按照实线-虚线顺序(10,10\5,5,10,10\……)
        stroke-dashoffset：虚线的起始偏移
        stroke-opacity：描边透明度

2. circle标签：绘制圆

    <circle cx="50" cy="50" r="50" />

    标签属性：
        cx：横坐标
        cy：纵坐标
        r：半径

    css属性：
        fill：填充色(none/#ffffff)

3. line标签：绘制直线

    <line x1="0" y1="0" x2="200" y2="0" />

    标签属性：
        x1,y1：起点横纵坐标
        x2,y2：终点横纵坐标

    css属性：

4. polyline标签：绘制折线

    <polyline points="3,3 30,28 3,53" />

    标签属性：
        points：每个端点坐标，用空格分隔

    css属性：

5. rect标签：绘制矩形

    <rect x="0" y="0" height="100" width="200" />

    标签属性：
        x,y：起点横纵坐标
        height：矩形高度
        width：矩形宽度

    css属性：
        fill：填充色
        height：矩形高度
        width：矩形宽度

6. ellipse标签：绘制椭圆

    <ellipse cx="60" cy="60" rx="20" ry="40" stroke="black" stroke-width="5" fill="silver"/>

    标签属性：
        cx,cy：椭圆中心横纵坐标
        rx,ry：横纵轴半径

    css属性：
        fill：填充色

7. polygon标签：绘制多边形

    <polygon points="0,0 100,0 100,100 0,100 0,0"/>

    标签属性：
        points：各个端点坐标

    css属性：
        fill：填充色

8. path标签：绘制路径

    <path d="M 0,0 L 124,0 L 124,40 L 0,40 Z"></path>

    标签属性：
        d：绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标
            M：移动到（moveto）
            L：画直线到（lineto）
            Z：闭合路径

    css属性：
        fill：填充色

9. text标签：绘制文本

    <text x="50" y="25">Hello World</text>

    标签属性：
        x,y：文本区块基线（baseline）起点的横坐标和纵坐标

    css属性：
        fill：填充色，即字体颜色

10. use标签：复制形状，形状的范围未确定，已知path路径无法复制

    <circle id="myCircle" cx="5" cy="5" r="4"/>
    <use href="#myCircle" x="10" y="0" fill="blue" />
    <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />

    标签属性：
        x,y：起始坐标
        width,height：？

11. g标签：将多个形状组成一个组，方便复用

    <g id="myCircle">
        <text x="25" y="20">圆形</text>
        <circle cx="50" cy="50" r="20"/>
    </g>

12. defs标签：用于自定义形状，它内部的代码不会显示，仅供引用。

    <defs>
        <g id="myCircle">
            <text x="25" y="20">圆形</text>
            <circle cx="50" cy="50" r="20"/>
        </g>
    </defs>
    <use href="#myCircle" x="0" y="0" />
    <use href="#myCircle" x="100" y="0" fill="blue" />
    <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />

13. 待更新……

demo

• 按钮边框动画

使用过程的一些问题：

• IE浏览器均不支持svg动画；
• svg绘制的路径以路径为中心，无法控制绘制在路径左边或者右边；
• js获取路径长度

    //var path = document.querySelector('path');
    //var length = path.getTotalLength();

相关阅读

• SVG 图像入门教程
• SVG之Animation
• 纯CSS实现帅气的SVG路径描边动画效果
• 超级强大的SVG SMIL animation动画详解
• Snap.svg API中文文档兼demo实例页面
• 使用 Snap.svg 制作动画
• 三看 SVG Web 动效