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();

相关阅读

分类: 前端

1 条评论

Ice Panpan · 2018-09-29 17:30

不错啊

发表评论

电子邮件地址不会被公开。 必填项已用*标注