svg基本知識

2021-09-29 18:42:54 字數 2764 閱讀 6358

寫這篇文章的緣由是因為做dashboard的專案,圖形是svg的專案,參考的專案使用div寫的,然後為了改樣式一直在套樣式,結果套不出來,也是醉了,整理了一下svg的基本格式,從w3c上整理的,詳細的列子參考

目錄

svg形狀

矩形 圓形

橢圓 線

多邊形

折線 標籤

svg 濾鏡

svg 高斯模糊

svg 線性漸變

svg 漸變

svg 放射性漸變

svg 有一些預定義的形狀元素,可被開發者使用和操作:

標籤可用來建立矩形,以及矩形的變種。

**解釋:

rect 元素的 width 和 height 屬性可定義矩形的高度和寬度

style 屬性用來定義 css 屬性

x 屬性定義矩形的左側位置(例如,x="0" 定義矩形到瀏覽器視窗左側的距離是 0px)

y 屬性定義矩形的頂端位置(例如,y="0" 定義矩形到瀏覽器視窗頂端的距離是 0px)

css 的 fill 屬性定義矩形的填充顏色(rgb 值、顏色名或者十六進製制值)

css 的 stroke-width 屬性定義矩形邊框的寬度

css 的 stroke 屬性定義矩形邊框的顏色

css 的 fill-opacity 屬性定義填充顏色透明度(合法的範圍是:0 - 1)

css 的 stroke-opacity 屬性定義筆觸顏色的透明度(合法的範圍是:0 - 1)

css 的 opacity 屬性定義整個元素的透明值(合法的範圍是:0 - 1)

rx 和 ry 屬性可使矩形產生圓角。

標籤可用來建立乙個圓。

**解釋:

cx 和 cy 屬性定義圓點的 x 和 y 座標。如果省略 cx 和 cy,圓的中心會被設定為 (0, 0)

r 屬性定義圓的半徑。

標籤可用來建立橢圓。橢圓與圓很相似。不同之處在於橢圓有不同的 x 和 y 半徑,而圓的 x 和 y 半徑是相同的

**解釋:

cx 屬性定義圓點的 x 座標

cy 屬性定義圓點的 y 座標

rx 屬性定義水平半徑

ry 屬性定義垂直半徑

**解釋:

x1 屬性在 x 軸定義線條的開始

y1 屬性在 y 軸定義線條的開始

x2 屬性在 x 軸定義線條的結束

y2 屬性在 y 軸定義線條的結束

**解釋:

points 屬性定義多邊形每個角的 x 和 y 座標

標籤用來定義路徑。

下面的命令可用於路徑資料:

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

它開始於位置 250 150,到達位置 150 350,然後從那裡開始到 350 350,最後在 250 150 關閉路徑

在 svg 中,可用的濾鏡有:

必須在 標籤中定義 svg 濾鏡。

標籤用來定義 svg 濾鏡。標籤使用必需的 id 屬性來定義向圖形應用哪個濾鏡?

標籤必須巢狀在 標籤內。標籤是 definitions 的縮寫,它允許對諸如濾鏡等特殊元素進行定義

**解釋:

標籤的 id 屬性可為濾鏡定義乙個唯一的名稱(同一濾鏡可被文件中的多個元素使用)

filter:url 屬性用來把元素鏈結到濾鏡。當鏈結濾鏡 id 時,必須使用 # 字元

濾鏡效果是通過 標籤進行定義的。fe 字尾可用於所有的濾鏡

標籤的 stddeviation 屬性可定義模糊的程度

in="sourcegraphic" 這個部分定義了由整個影象建立效果

svg 漸變必須在 標籤中進行定義。

漸變是一種從一種顏色到另一種顏色的平滑過渡。另外,可以把多個顏色的過渡應用到同乙個元素上。

在 svg 中,有兩種主要的漸變型別:

線性漸變

可用來定義 svg 的線性漸變。

標籤必須巢狀在 的內部。標籤是 definitions 的縮寫,它可對諸如漸變之類的特殊元素進行定義。

線性漸變可被定義為水平、垂直或角形的漸變:

**解釋:

標籤的 id 屬性可為漸變定義乙個唯一的名稱

fill:url(#orange_red) 屬性把 ellipse 元素鏈結到此漸變

標籤的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置

漸變的顏色範圍可由兩種或多種顏色組成。每種顏色通過乙個 標籤來規定。offset 屬性用來定義漸變的開始和結束位置。

放射性漸變

用來定義放射性漸變。

標籤必須巢狀在 中。標籤是 definitions 的縮寫,它允許對諸如漸變等特殊元素進行定義

**解釋:

標籤的 id 屬性可為漸變定義乙個唯一的名稱,fill:url(#grey_blue) 屬性把 ellipse 元素鏈結到此漸變,

cx、cy 和 r 屬性定義外圈,

而 fx 和 fy 定義內圈 漸變的顏色範圍可由兩種或多種顏色組成。

每種顏色通過乙個 標籤來規定。offset 屬性用來定義漸變的開始和結束位置。

Oracle 基本知識

乙個表空間只能屬於乙個資料庫 每個資料庫最少有乙個控制檔案 建議3個,分別放在不同的磁碟上 每個資料庫最少有乙個表空間 system表空間 建立system表空間的目的是盡量將目的相同的表存放在一起,以提高使用效率,只應存放資料字典 每個資料庫最少有兩個聯機日誌組,每組最少乙個聯機日誌檔案 乙個資料...

Oracle 基本知識

乙個表空間只能屬於乙個資料庫 每個資料庫最少有乙個控制檔案 建議3個,分別放在不同的磁碟上 每個資料庫最少有乙個表空間 system表空間 建立system表空間的目的是盡量將目的相同的表存放在一起,以提高使用效率 每個資料庫最少有兩個聯機日誌檔案 乙個資料檔案只能屬於乙個表空間 乙個資料檔案一旦被...

Oracle 基本知識

oracle 文章摘要 oracle 基本知識。正文 oracle 基本知識 乙個表空間只能屬於乙個資料庫 每個資料庫最少有乙個控制檔案 建議3個,分別放在不同的磁碟上 每個資料庫最少有乙個表空間 system表空間 建立system表空間的目的是盡量將目的相同的表存放在一起,以提高使用效率 每個資...