SVG

總結(jié)的 svg 知識(shí)，方便以后復(fù)習(xí)查看 ~ ~

SVG是什么

SVG 表示可縮放矢量圖

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

SVG 用XML格式定義矢量圖

SVG 在縮放時(shí)不會(huì)損失任何的圖片質(zhì)量

SVG 文件里的所有元素和屬性都可以運(yùn)用動(dòng)畫效果

SVG 是W3C推薦的

SVG 集成了其它W3C標(biāo)準(zhǔn)，比如 DOM 和 XSL

// 先來一個(gè)簡單的例子

1. SVG圖片用標(biāo)記定義

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

3. 元素的功能是畫出一個(gè)圓

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

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

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

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

SVG形狀

矩形

圓形

橢圓

直線

折線

多邊形

路徑

一、rect 矩形

style屬性定義了這個(gè)矩形的CSS屬性。

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

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

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

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

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

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

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

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

rx和ry定義了矩形四個(gè)角的圓角效果

二、circle 圓形

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

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

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

三、ellipse 橢圓

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

cx屬性定義了橢圓的x坐標(biāo)

cy屬性定義了橢圓的y坐標(biāo)

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軸起始坐標(biāo)

y1屬性定義了直線的y軸起始坐標(biāo)

x2屬性定義了直線的x軸終止坐標(biāo)

y2屬性定義了直線的y軸終止坐標(biāo)

五、polyline 折線

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

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

points屬性里定義了各個(gè)點(diǎn)的坐標(biāo)，x和y坐標(biāo)之間用逗號分別，多個(gè)坐標(biāo)之間用空格分割

五、polygon 多邊形

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

points屬性里定義了多邊形各個(gè)角的x和y坐標(biāo)，多個(gè)坐標(biāo)間用空格分隔

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

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

使用fill-rule: evenodd屬性：

六、path 路徑

// 從點(diǎn) 150,0 開始，連直線到點(diǎn) 75,200，然后連直線到點(diǎn) 225,200，最后閉合這個(gè)路徑，連直線回到點(diǎn) 150,0:

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

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

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

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

fill="none" />

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

text-anchor="middle">

A

B

C

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

七、text 文本

SVG是個(gè)好東西！

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

transform 可以進(jìn)行變換

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

這里有幾行文字：

這是第一行文字。

第二行文字在這里。

// 還可以插入鏈接

SVG是個(gè)好東西！

SVG重點(diǎn)屬性

一、 SVG邊線邊框?qū)傩?/p>

SVG stroke 屬性

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

SVG stroke-width 屬性

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

SVG stroke-linecap 屬性

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

SVG stroke-dasharray 屬性

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

二、 SVG的viewBox和preserveAspectRatio屬性

請參考下面的手冊~

SVG結(jié)構(gòu)元素

use 克隆

.classA {

fill: red

}

black

red

blue

標(biāo)記的作用是能從SVG文檔內(nèi)部取出一個(gè)節(jié)點(diǎn)，克隆它，并把它輸出到別處。跟‘引用’很相似，但它是深度克隆。

symbol 圖像模板

g 分組 + 繼承父級

標(biāo)記就是‘group’的簡寫，是用來分組用的，它能把多個(gè)元素放在一組里，對標(biāo)記實(shí)施的樣式和渲染會(huì)作用到這個(gè)分組內(nèi)的所有元素上。組內(nèi)的所有元素都會(huì)繼承標(biāo)記上的所有屬性。用定義的分組還可以使用進(jìn)行復(fù)制使用。

SVG文字文本

SVG 濾鏡和漸變

參考文獻(xiàn)

實(shí)例

圓形進(jìn)度條

Document

circle{

stroke-width: 5px;

transform-origin: center;

}

.background{

/* 縮小一點(diǎn)可以放進(jìn)容器 */

transform: scale(0.9);

stroke: green;

}

.bar{

/* 縮小 + 逆時(shí)針旋轉(zhuǎn) 90度 */

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

stroke: red;

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。