SVG基本圖形

SVG 是使用 XML 來描述二維圖形和繪圖程序的語言

• SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
• SVG 用來定義用於網絡的基於矢量的圖形
• SVG 使用 XML 格式定義圖形
• SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
• SVG 是萬維網聯盟的標准
• SVG 與諸如 DOM 和 XSL 之類的 W3C 標准是一個整體

SVG坐標系統：

一、圓

<svg width="50" height="50">
    <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"></circle>
</svg>

cx和cy屬性定義圓點的x和y坐標，如果省略cx和cy，圓的中心會被設置為（0,0）；r定義半徑；

fill：內部填充顏色；stroke：輪廓顏色；stroke-width：輪廓寬；opacity：透明度, 0.0完全透明，1.0不透明

二、矩形

<rect x="0" y="0" width="500" height="50"/>

三、橢圓

<ellipse cx="250" cy="25" rx="100" ry="25"/>

四、線條line

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

五、折線polyline

用來創建只包含直線的形狀

<svg>
  <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"></polyline>
</svg>

 

六、路徑path

下面的命令可用於路徑數據：（命令詳情可查看https://segmentfault.com/a/1190000005053782）

• M = moveto   兩個參數 畫筆起始位置
• L = lineto    兩個參數，畫直線（x ,y）坐標 ，在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段
• H = horizontal lineto         一個參數，繪制水平直線
• V = vertical lineto     一個參數，繪制垂直線
• C = curveto   三次貝塞爾曲線 命令參數：C x1 y1, x2 y2, x y  起點控制點，終點控制點，終點
• S = smooth curveto  簡寫的貝塞爾曲線命令 命令參數：S x2 y2, x y
• Q = quadratic Belzier curve   二次貝塞爾曲線 命令參數：Q x1 y1, x y  控制點，終點坐標
• T = smooth quadratic Belzier curveto  Q命令的簡寫 T x y
• A = elliptical Arc
• Z = closepath   閉合路徑，從當前點畫一條直線到路徑的起點。不區分大小寫

注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。

<svg>
    <path d="M250 150 L150 350 L350 350 Z" stroke="blue" stroke-width="2"/>
</svg>

 

五、text

<text x="250" y="25" fill="gray" font-family="serif" font-size="25">Easy-peasy</text>

Layering and Drawing Order

<svg width="500" height="50">
  <rect x="0" y="0" width="30" height="30" fill="purple"/>
  <rect x="20" y="5" width="30" height="30" fill="blue"/>
  <rect x="40" y="10" width="30" height="30" fill="green"/>
  <rect x="60" y="15" width="30" height="30" fill="yellow"/>
  <rect x="80" y="20" width="30" height="30" fill="red"/>
</svg>

Transparency

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
        stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)"
        stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)"
        stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>

<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10"/>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10"/>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10"/>
</svg>

<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10"
        opacity="0.9"/>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10"
        opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10"
        opacity="0.1"/>  //透明度應用在整個circle元素上

 

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
        stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="65" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
        stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
        stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"/>