HTML5 十大新特性(五)——SVG绘图

时间:2020-12-20 09:32:35

  相对于canvas绘图,SVG是一种绘制矢量图的技术。全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身。需要注意的是,SVG图形的属性不属于HTML DOM标准,需要用核心DOM的方法来操作;SVG的样式可以用css,但是只能用其专有的属性;如果要使用js动态生成SVG其中的元素,创建方法得用document.createElementNS('http://www.w3.org/2000/svg','标签名');SVG元素的nodeName都是纯小写形式。

  一、使用方法

    在HTML文件中直接使用SVG相关标签(<svg></svg>)即可,默认是一个300*150的inline-block。

  二、绘制不同图形(部分)

    1、绘制矩形

    <rect [width/height/x/y/fill/fill-opacity/stroke/stroke-width/stroke-opacity]></rect>

    2、绘制圆形

    <circle [r/cx/cy]></circle>

    3、绘制椭圆

    <ellipse [rx/ry/cx/cy]></ellipse>

    4、绘制直线

    <line [x1/y1/x2/y2/stroke]></line>

    5、绘制折线

    <polyline [points/stroke]></polyline>

    6、绘制多边形

    <polygen [points]></polygen>

    7、绘制文本

    <text [x/y/font-size/alignment-baseline/fill]></text>

    8、绘制图像

    <image [width/height/xlink:href]></image>

    9、特效对象——渐变特效

    <defs>

      <linearGradient [x1/y1/x2/y2]>

        <stop [offset/stop-color]></stop>

      </linearGradient>

    </defs>

    10、特效对象——高斯模糊滤镜

    <defs>

      <filter>

        <feGaussionBlur [stdDeviation]>

      </filter>

    </defs>