1

SVG

1.SVG简介

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

矢量图与位图

位图:基于颜色的描述,如BMP、PNG、JPG
矢量图:基于数学的描述,如SVG、AI

基本图形和属性

1.基本图形
<rect>
图片描述
<circle>
图片描述
<ellipse>
图片描述
<line>
图片描述
<polyline>
图片描述
<polygon>
图片描述
2.基本属性
fill、stroke、stroke-width、transform
示例如下:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect 
        x="10" 
        y="10" 
        rx="5" 
        ry="5" 
        width="150" 
        height="100" 
        stroke="red" 
        fill="none">
    </rect>

    <circle 
        cx="250" 
        cy="60" 
        r="50" 
        stroke="red" 
        fill="none">
    </circle>

    <ellipse 
        cx="400" 
        cy="60" 
        rx="70" 
        ry="50" 
        stroke="red" 
        fill="none">
    </ellipse>

    <line 
        x1="10" 
        y1="120" 
        x2="160" 
        y2="220" 
        stroke="red">
    </line>

    <polyline 
        points="250 120 
                300 220
                200 220"
        stroke="red"
        fill="none">
    </polyline>

    <polygon 
        points="250 120 
                300 220
                200 220"
        stroke="red"
        stroke-width="5"
        fill="yellow"
        transform="translate(150 0)">
    </polygon>
</svg>

3.基本操作API

  • 创建图形
    document.createElementNS(ns,tagName);
  • 添加图形
    element.appendChild(childElement);
  • 获取/设置属性
    element.setAttribute(name,value);
    element.getAttribute(name);

啊哈hl
141 声望1 粉丝

be a better man