SVG介绍

Posted 2020-11-22 jlfw

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