SVG介紹

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