HTML學習筆記(五) SVG

0、基本介紹

SVG 是一種基於 XML 語法的圖像格式，全稱是可縮放矢量圖（Scalable Vector Graphics）

它的本質其實就是對圖片進行描述的文本，因此無論我們將圖片放大多少倍都不會失真

使用 SVG 的方式有很多，以下是最常見的幾種：

將 SVG 代碼直接插入 HTML
將 SVG 代碼保存爲一個文件，在 HTML 中通過標籤引入
將 SVG 代碼保存爲一個文件，在 CSS 中作爲資源引入

1、創建容器

使用 <svg> 標籤可以聲明一個 SVG 文檔片段，如果不指定屬性 width、height，那麼默認寬高爲 300*150

<!DOCTYPE html>
<html>
<head>
    <title>SVG Demo</title>
</head>
<body>
    <svg id="graph" width="300px" height="300px"></svg>
</body>
</html>

2、圖形標籤

在容器中，預定義有一些圖形標籤，方便開發者用於繪製圖形

（0）通用屬性

這些圖形標籤有一些通用的屬性，用於控制圖形的樣式

fill：設置圖形內部的顏色
fill-opacity：設置內部顏色的不透明度
stroke：設置圖形邊框的顏色
stroke-width：設置圖形邊框的寬度
stroke-opacity：設置邊框顏色的不透明度

（1）矩形

使用 <rect> 標籤可以繪製矩形，該標籤常用的屬性如下：

x：矩形左上角 X 軸座標
y：矩形左上角 Y 軸座標
width：矩形寬度
height：矩形高度
rx：X 軸方位的圓角半徑
ry：Y 軸方位的圓角半徑

<svg id="graph" width="300px" height="300px">
    <rect x="100" y="100" width="100" height="100" />
</svg>

（2）圓形

使用 <circle> 標籤可以繪製圓形，該標籤常用的屬性如下：

cx：圓心 X 軸座標
cy：圓心 Y 軸座標
r：半徑

<svg id="graph" width="300px" height="300px">
    <circle cx="150" cy="150" r="100" />
</svg>

（3）橢圓

使用 <ellipse> 標籤可以繪製橢圓，該標籤常用的屬性如下：

cx：橢圓中心 X 軸座標
cy：橢圓中心 Y 軸座標
rx：水平半徑
ry：垂直半徑

<svg id="graph" width="300px" height="300px">
    <ellipse cx="150" cy="150" rx="100" ry="50" />
</svg>

（4）線段

使用 <line> 標籤可以繪製線段，該標籤常用的屬性如下：

x1：線段起點 X 軸座標
y1：線段起點 Y 軸座標
x2：線段終點 X 軸座標
y2：線段終點 Y 軸座標

<svg id="graph" width="300px" height="300px">
    <line x1="50" y1="50" x2="250" y2="250" stroke="black" />
</svg>

（5）折線

折線其實就是由一條條線段連接而成，使用 <polyline> 標籤可以繪製折線，常用的屬性如下：

points：定義一組節點，每個節點包含兩個數字，分別代表這個點的 X、Y 座標

<svg id="graph" width="300px" height="300px">
    <polyline points="150 100,100 200,200 200" fill="none" stroke="black" />
</svg>

（6）多邊形

多邊形和折線類似，區別在於多邊形最後會自動閉合，使用 <polygon> 標籤可以繪製多邊形，常用的屬性如下：

points：定義一組節點，節點之間使用逗號隔開，每個節點包含兩個數字，分別代表這個點的 X、Y 座標

<svg id="graph" width="300px" height="300px">
    <polygon points="150 100,100 200,200 200" fill="none" stroke="black" />
</svg>

（7）路徑

路徑可以用於繪製任何圖形，使用 <path> 標籤可以繪製路徑，它通過屬性 d 定義繪製的順序

實際上它的值表示一組繪製命令，通過簡寫的字母表示動作，後面跟着必要的參數，常見的命令如下：

只移動不繪製

M x y：將當前點移動到 (x, y)

繪製直線

L x y：從當前點到 (x, y) 畫一條直線
H x：從當前點水平移動 x 像素畫一條直線，若 x 爲正數，則沿着 X 軸正方向移動，反之則沿着負方向移動
V y：從當前點垂直移動 y 像素畫一條直線，若 y 爲正數，則沿着 Y 軸正方向移動，反之則沿着負方向移動
Z：從當前點到起始點畫一條直線，它的作用相當於閉合路徑

繪製曲線

A rx ry x-axis-rotation large-arc-flag sweep-flag x y：繪製弧形

rx 表示橢圓 X 軸半徑，ry 表示橢圓 Y 軸半徑，x-axis-rotation 表示橢圓相對於座標軸的旋轉角度

對於 large-arc-flag，若值爲 0，表示繪製小弧部分，若值爲 1，表示繪製大弧部分

對於 sweep-flag，若值爲 0，表示逆時針繪製，若值爲 1，表示順時針繪製

x 表示圓弧終點 X 軸座標，y 表示圓弧終點 Y 軸座標
Q cx cy x y：繪製二次貝塞爾曲線

(cx, cy) 表示控制點的座標，(x, y) 表示結束點的座標
T x y：繪製二次貝塞爾曲線的簡寫命令

如果該命令前面是 Q 或者 T 命令，那麼它的控制點就是上一個控制點關於上一個終點的對稱點

如果該命令單獨使用，那麼它的控制點和終點是同一個點
C cx1 cy1 cx2 cy2 x y：繪製三次貝塞爾曲線

(cx1, cy1) 表示第一個控制點的座標，(cx2, cy2) 表示第二個控制點的座標，(x, y) 表示結束點的座標
S cx2 cy2 x y：繪製三次貝塞爾曲線的簡寫命令

如果該命令前面是 C 或者 S 命令，那麼它的第一個控制點就是上一個控制點關於上一個終點的對稱點

如果該命令單獨使用，那麼它的第一個控制點和第二個控制點是同一個點

<svg id="graph" width="300px" height="300px">
    <path d="M 150 150
             L 250 150
             A 100 100 0 0 0 50 150"
          fill="none"
          stroke="black" />
</svg>

（8）文本

使用 <text> 標籤可以繪製文本，該標籤常用的屬性如下：

x：表示文本區域基線起點 X 軸座標
y：表示文本區域基線起點 Y 軸座標

<svg id="graph" width="300px" height="300px">
    <text x="50" y="50">Hello World</text>
</svg>

3、功能標籤

除了圖形標籤，在容器中還能使用一些功能標籤實現特定功能

（1）展示

使用 <use> 標籤可以複製並展示一個圖形，常用的屬性如下：

href：指定要複製的節點
x：左上角 X 軸座標
y：左上角 Y 軸座標

<svg id="graph" width="300px" height="300px">
    <circle id="myCircle" cx="50" cy="50" r="50" />
    <use href="#myCircle" x="200" y="200" />
</svg>

（2）組合

使用 <g> 標籤可以將多個圖形組合在一起

<svg id="graph" width="300px" height="300px">
    <g id="cross">
        <line x1="20" y1="20" x2="80" y2="80" stroke="black" />
        <line x1="80" y1="20" x2="20" y2="80" stroke="black" />
    </g>

    <use href="#cross" x="200" y="200" />
</svg>

（3）定義

使用 <defs> 標籤可以自定義一個圖形，這個圖形不會被顯示，但能被引用

<svg id="graph" width="300px" height="300px">
    <defs>
        <g id="hook">
            <line x1="10" y1="50" x2="40" y2="90" stroke="black" />
            <line x1="40" y1="90" x2="90" y2="10" stroke="black" />
        </g>
    </defs>

    <use href="#hook" x="200" y="200" />
</svg>

（4）模式

使用 <pattern> 標籤可以自定義一個圖形，這個圖形不會被顯示，但能被引用填充一個區域，常用的屬性如下：

x：邊界框左上角 X 軸座標，默認爲 0
y：邊界框左上角 Y 軸座標，默認爲 0
width：邊界框寬度，默認爲 0
height：邊界框高度，默認爲 0
patternUnits：定義圖案效果區域的單位，可選值如下：
- userSpaceOnUse：表示使用當前用戶座標系中的值
- objectBoundingBox：表示引用邊界框的分數或百分比的值

<svg id="graph" width="300px" height="300px">
    <pattern id="dot" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="10" cy="10" r="5" />
    </pattern>

    <rect x="100" y="100" width="100" height="100" fill="url(#dot)" />
</svg>

（5）圖片

使用 <image> 標籤可以插入圖片，使用 xlink:href 屬性指定圖片來源

<svg id="graph" width="300px" height="300px">
    <image xlink:href="image.jpg" width="50%" height="50%" />
</svg>

（6）動畫

使用 <animate> 標籤可以產生動畫，常用的屬性如下：

attributeName：產生動畫的屬性名稱
from：屬性的初始值
to：屬性的結束值
dur：動畫的持續時間
repeatCount：動畫的循環模式

<svg id="graph" width="300px" height="300px">
    <ellipse cx="150" cy="150" rx="100" ry="50">
        <animate attributeName="rx" from="100" to="300" dur="2s" repeatCount="indefinite" />
        <animate attributeName="ry" from="50" to="300" dur="2s" repeatCount="indefinite" />
    </ellipse>
</svg>

【閱讀更多 HTML 系列文章，請看 HTML學習筆記】

HTML學習筆記(五) SVG

0、基本介紹

1、創建容器

2、圖形標籤

3、功能標籤

React學習筆記(八) 虛擬DOM與Diff算法

CSS學習筆記(十二) 顯示方式

Node.js學習筆記(六) express模塊

Vue學習筆記(十三) 響應式原理

CSS實戰筆記(十一) 自適應三欄佈局

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結