SVG

總結的 svg 知識，方便以后復習查看 ~ ~

SVG是什么

SVG 表示可縮放矢量圖

SVG 用來定義WEB上使用的矢量圖

SVG 用XML格式定義矢量圖

SVG 在縮放時不會損失任何的圖片質量

SVG 文件里的所有元素和屬性都可以運用動畫效果

SVG 是W3C推薦的

SVG 集成了其它W3C標準，比如 DOM 和 XSL

// 先來一個簡單的例子

1. SVG圖片用標記定義

2. 元素里提供了`“width”`和`“height”`兩個屬性來定義SVG圖片的高度和寬度

3. 元素的功能是畫出一個圓

4. cx和cy兩個屬性分別定義了圓心的x坐標和y坐標。如果沒有提供cx和cy的值，那么，缺省圓心是(0, 0)

5. r屬性定義了圓的半徑長度

6. stroke和stroke-width兩個屬性用來定義圖像的邊框樣子。上面例子中定義圓的邊框顏色為green，邊框粗細為4px

7. fill屬性定義了圓內部填充的顏色。我們可以看出，例子中填充了黃色

SVG形狀

矩形

圓形

橢圓

直線

折線

多邊形

路徑

一、rect 矩形

style屬性定義了這個矩形的CSS屬性。

style屬性里的fill屬性定義了這個矩形填充的顏色

style屬性里的stroke-width屬性定義了矩形邊線的寬度

style屬性里的stroke屬性定義了矩形的邊線的顏色

x屬性定義矩形距離左邊的距離，比如，x="50"相對于CSS里的 margin-left: 50px

y屬性定義了矩形距離上邊的距離，比如y="20"相當于CSS里的 margin-top: 20px

CSS fill-opacity屬性定義了填充顏色的透明度，值范圍為 0 到 1

CSS stroke-opacity屬性定義了邊線顏色的透明度，值范圍為 0 到 1

CSS opacity屬性定義了整個圖形元素的透明度

rx和ry定義了矩形四個角的圓角效果

二、circle 圓形

stroke-width="3" fill="red" />

cx和cy屬性是用來定義圓心的坐標。如果沒有提供cx和cy的值，則缺省圓心是(0,0)

r屬性定義了圓的半徑長度

三、ellipse 橢圓

style="fill:yellow;stroke:purple;stroke-width:2" />

cx屬性定義了橢圓的x坐標

cy屬性定義了橢圓的y坐標

rx屬性定義了橢圓的橫向半徑

ry屬性定義了橢圓的縱向半徑

style="fill:purple" />

style="fill:lime" />

style="fill:yellow" />

style="fill:yellow" />

style="fill:white" />

四、line 直線

style="stroke:rgb(255,0,0);stroke-width:2" />

x1屬性定義了直線的x軸起始坐標

y1屬性定義了直線的y軸起始坐標

x2屬性定義了直線的x軸終止坐標

y2屬性定義了直線的y軸終止坐標

五、polyline 折線

style="fill:none;stroke:black;stroke-width:3" />

style="fill:white;stroke:red;stroke-width:4" />

points屬性里定義了各個點的坐標，x和y坐標之間用逗號分別，多個坐標之間用空格分割

五、polygon 多邊形

style="fill:lime;stroke:purple;stroke-width:1" />

points屬性里定義了多邊形各個角的x和y坐標，多個坐標間用空格分隔

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

fill-rule屬性的取值可以是nonzero | evenodd | inherit

使用fill-rule: evenodd屬性：

六、path 路徑

// 從點 150,0 開始，連直線到點 75,200，然后連直線到點 225,200，最后閉合這個路徑，連直線回到點 150,0:

`貝塞爾曲線`是一種非常順滑的曲線。通常，用戶需要提供兩個端點和一個或兩個控制點。使用一個控制點的貝塞爾曲線叫做`二次方貝塞爾曲線`，使用兩個控制點的貝塞爾曲線叫做`三次方貝塞爾曲線`。

下面的例子里使用了二次方貝塞爾曲線，其中 A 和 C 分別是兩個端點，B是控制點：

stroke-width="3" fill="none" />

stroke-width="3" fill="none" />

fill="none" />

stroke-width="5" fill="none" />

text-anchor="middle">

A

B

C

是不是很復雜呢，確實是，所以一般復雜的過程都需要SVG編輯器來編輯

七、text 文本

SVG是個好東西！

transform="rotate(30 20,40)">SVG是個好東西！

transform 可以進行變換

// 在元素里，我們可以使用元素給文字分組，每個元素可以定義自己的格式/樣式/位置。

這里有幾行文字：

這是第一行文字。

第二行文字在這里。

// 還可以插入鏈接

SVG是個好東西！

SVG重點屬性

一、 SVG邊線邊框屬性

SVG stroke 屬性

這個stroke屬性用來定義圖形、文本等的邊線顏色：

SVG stroke-width 屬性

stroke-width屬性用來定義圖形或文字邊線的寬度：

SVG stroke-linecap 屬性

stroke-linecap屬性用來定義開放式路徑的端點的樣子：

SVG stroke-dasharray 屬性

stroke-dasharray屬性用來定義開放式路徑的端點的樣子：

二、 SVG的viewBox和preserveAspectRatio屬性

請參考下面的手冊~

SVG結構元素

use 克隆

.classA {

fill: red

}

black

red

blue

標記的作用是能從SVG文檔內部取出一個節點，克隆它，并把它輸出到別處。跟‘引用’很相似，但它是深度克隆。

symbol 圖像模板

g 分組 + 繼承父級

標記就是‘group’的簡寫，是用來分組用的，它能把多個元素放在一組里，對標記實施的樣式和渲染會作用到這個分組內的所有元素上。組內的所有元素都會繼承標記上的所有屬性。用定義的分組還可以使用進行復制使用。

SVG文字文本

SVG 濾鏡和漸變

參考文獻

實例

圓形進度條

Document

circle{

stroke-width: 5px;

transform-origin: center;

}

.background{

/* 縮小一點可以放進容器 */

transform: scale(0.9);

stroke: green;

}

.bar{

/* 縮小 + 逆時針旋轉 90度 */

transform: scale(0.9) rotate(-90deg);

stroke: red;

}

總結

以上是生活随笔為你收集整理的html5 svg编辑器,HTML5 之 SVG的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。