svg基本知識

寫這篇文章的緣由是因為做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 屬性用來定義漸變的開始和結束位置。

svg基本知識

Oracle 基本知識

Oracle 基本知識

Oracle 基本知識

svg基本知識

Oracle 基本知識

Oracle 基本知識

Oracle 基本知識

相關推薦