(一)基本图形

一、\<rect\> 巨型

  • x
  • y

    横纵坐标(原点是浏览器左上方)

  • width

  • height

    这个巨型的宽高

  • rx

  • ry

    圆角

    如果只给了rx或者ry说明这个圆角是等半径的

二、\<circle\> 圆形

  • cx
  • cy
  • r

三、\<ellipse\> 椭圆形

  • cx
  • cy
  • rx
  • ry

四、\<line\> 直线

  • x1
  • y1
  • x2
  • y2

    起点、终点坐标

五、\<polyline\> 折线

  • points

(二)填充、描边和变换

  • fill 填充
  • stroke 描边颜色
  • stroke-width 描边的粗细
  • transform 变形

(三)基本操作api

在写js的svg操作要引入命名空间: SVG_NS = ‘http://www.w3.org/2000/svg‘;

  1. 创建图形

    document.createElementNS(ns, tagName);

  2. 添加图形

    element.appendChild(childElement);

  3. 设置/获取属性

    element.setAttribute(name, value);
    element.getAttribute(value);

您的支持是对我最大的鼓励!

分类: SVG

标签:   svg