svg基本元素(基本图形)

(一)基本图形

一、 巨型

  • x

  • y

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

  • width

  • height

    这个巨型的宽高

  • rx

  • ry

    圆角

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

svg基本元素(基本图形)_第1张图片

二、 圆形

  • cx
  • cy
  • r
svg基本元素(基本图形)_第2张图片

三、 椭圆形

  • cx
  • cy
  • rx
  • ry
svg基本元素(基本图形)_第3张图片

四、 直线

  • x1

  • y1

  • x2

  • y2

    起点、终点坐标

五、 折线

  • points

(二)填充、描边和变换

  • fill 填充

  • stroke 描边颜色

  • stroke-width 描边的粗细

  • transform 变形

    svg基本元素(基本图形)_第4张图片

(三)基本操作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基本元素(基本图形))