svg：可縮放向量圖形。全稱是：scalable vector graphics
svg使用 xml 格式定義影象。
svg是使用 xml 來描述（二維圖形和繪圖）程式的語言。
svg是w3c的推薦標準
svg於2023年1月14日成為w3c推薦標準。
這是svg單獨檔案：
-->
-->
-->
-->
這是svg在html中：svg檔案可以通過以下標籤嵌入 html 文件：、和 。
svg的**可以直接嵌入到html頁面中，或你可以直接鏈結到svg檔案中。
使用標籤：
優勢：所有主流瀏覽器都支援，並允許使用指令碼。
svg有一些預定義的形狀元素，可被開發者使用操作。
矩形圓形橢圓線
折線多邊形
路徑
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>document
title
>
6<
link
rel="stylesheet"
href
="css/main.css"
>
7head
>
8<
body
>910
<
svg
xmlns
=""version
="1.0"
>
11<
rect
width
="300"
height
="100"
style
="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(255,0,0);"
>
rect
>
12svg
>
13<
p>**解析
p>
14<
ul>
15<
li>rect元素的width和height屬性可定義矩形的高度和寬度
li>
16<
li>style屬性用來定義css屬性
li>
17<
li>css的fill屬性定義矩形的填充顏色
li>
18<
li>css的stroke-width屬性定義矩形邊框的寬度
li>
19<
li>css的stroke屬性定義矩形邊框的顏色
li>
20ul
>
2122
<
svg
xmlns
=""version
="1.1"
>
23<
rect
x="50"
y="20"
width
="100"
height
="100"
style
="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"
>
rect
>
24svg
>
25<
p>**解析
p>
26<
ul>
27<
li>x屬性定義矩形的左側位置
li>
28<
li>y屬性定義矩形的頂端位置
li>
29<
li>css的fill-opacity屬性定義填充顏色的透明度
li>
30<
li>css的stroke-opacity屬性定義筆觸顏色的透明度
li>
31ul
>
32<
svg
xmlns
=""version
="1.1"
>
33<
rect
x="50"
y="20"
width
="100"
height
="100"
style
="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.5;opacity:0.5"
>
rect
>
34svg
>
35<
p>**解析
p>
36<
ul>
37<
li>css的opacity屬性用於定義了元素的透明值
li>
38ul
>
3940
<
svg
xmlns
=""version
="1.1"
>
41<
rect
x="50"
y="20"
rx="20"
ry="20"
width
="100"
height
="100"
style
="fill:red;stroke:black;stroke-width:5;opacity:0.5"
>
rect
>
42svg
>
43<
p>**解析
p>
44<
ul>
45<
li>rx 和 ry 屬性可使矩形產生圓角
li>
46ul
>
47body
>
48html
>
這個是畫個圓，感覺挺簡單的。
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>title
title
>
6head
>
7<
body
>
8<
svg
xmlns
=""version
="1.1"
>
9<
circle
cx="100"
cy="50"
r="40"
stroke
="black"
stroke-width
="2"
fill
="red"
>
circle
>
10svg
>
11<
p>cx和cy屬性定義圓點的x和y座標。如果省略cx和cy,圓的中心會被設定為(0,0).r屬性定義圓的半徑。
p>
1213
body
>
14html
>
小知識總結
關於nginx access.log 問題待 兩個重要的命令 netstat losf netstat a all 顯示所有選項，預設不顯示listen相關 t tcp 僅顯示tcp相關選項 u udp 僅顯示udp相關選項 n 拒絕顯示別名，能顯示數字的全部轉化成數字。l 僅列出有在 listen...
Svg初學總結
原來使用js外掛程式來畫圖highchart.js,發現還是用svg實現的，打算學習了解一下，以下都是可直接在html插入。支援瀏覽器 internet explorer9，火狐，谷歌chrome，opera和safari 矩形原始碼 解析 rect 元素的 width 和 height 屬性可定義...
svg基本知識
寫這篇文章的緣由是因為做dashboard的專案，圖形是svg的專案,參考的專案使用div寫的，然後為了改樣式一直在套樣式，結果套不出來，也是醉了，整理了一下svg的基本格式，從w3c上整理的，詳細的列子參考 目錄 svg形狀 矩形 圓形 橢圓 線 多邊形 折線 標籤 svg 濾鏡 svg 高斯模糊...