SVG 學(xué)習(xí)筆記
SVG是什么
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
- SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體
SVG的優(yōu)勢(shì)
- SVG 可被非常多的工具讀取和修改（比如記事本）
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小尖昏，且可壓縮性更強(qiáng)仰税。
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
- SVG 可在圖像質(zhì)量不下降的情況下被放大
- SVG 圖像中的文本是可選的，同時(shí)也是可搜索的（很適合制作地圖）
- SVG 可以與 Java 技術(shù)一起運(yùn)行
- SVG 是開放的標(biāo)準(zhǔn)
- SVG 文件是純粹的 XML
SVG實(shí)例
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
代碼解釋
第一行包含了 XML 聲明抽诉。請(qǐng)注意 standalone 屬性陨簇！該屬性規(guī)定此 SVG 文件是否是“獨(dú)立的”，或含有對(duì)外部文件的引用迹淌。
standalone="no" 意味著 SVG 文檔會(huì)引用一個(gè)外部文件 - 在這里河绽，是 DTD 文件。
第二和第三行引用了這個(gè)外部的 SVG DTD巍沙。該 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”葵姥。該 DTD 位于 W3C，含有所有允許的 SVG 元素句携。
SVG 代碼以 <svg> 元素開始榔幸，包括開啟標(biāo)簽 <svg> 和關(guān)閉標(biāo)簽 </svg> 。這是根元素。width 和 height 屬性可設(shè)置此 SVG 文檔的寬度和高度削咆。version 屬性可定義所使用的 SVG 版本牍疏，xmlns 屬性可定義 SVG 命名空間。
SVG 的 <circle> 用來創(chuàng)建一個(gè)圓拨齐。cx 和 cy 屬性定義圓中心的 x 和 y 坐標(biāo)鳞陨。如果忽略這兩個(gè)屬性，那么圓點(diǎn)會(huì)被設(shè)置為 (0, 0)瞻惋。r 屬性定義圓的半徑厦滤。
stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設(shè)置為 2px 寬歼狼，黑邊框掏导。
fill 屬性設(shè)置形狀內(nèi)的顏色。我們把填充顏色設(shè)置為紅色羽峰。
關(guān)閉標(biāo)簽的作用是關(guān)閉 SVG 元素和文檔本身趟咆。
注釋：所有的開啟標(biāo)簽必須有關(guān)閉標(biāo)簽！
SVG 形狀
SVG 有一些預(yù)定義的形狀元素梅屉，可被開發(fā)者使用和操作值纱。
- 矩形
<rect> - 圓形
<circle> - 橢圓
<ellipse> - 線
<line> - 折線
<polyline> - 多邊形
<polygon> - 路徑
<path>
<rect> 標(biāo)簽
<rect> 標(biāo)簽可用來創(chuàng)建矩形，以及矩形的變種坯汤。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
代碼解釋：
- rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
- style 屬性用來定義 CSS 屬性
- CSS 的 fill 屬性定義矩形的填充顏色（rgb 值虐唠、顏色名或者十六進(jìn)制值）
- CSS 的 stroke-width 屬性定義矩形邊框的寬度
- CSS 的 stroke 屬性定義矩形邊框的顏色
新屬性示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
代碼解釋：
- x 屬性定義矩形的左側(cè)位置（例如，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px）
- y 屬性定義矩形的頂端位置（例如玫霎，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
- CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
- CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）
為整個(gè)元素定義透明度：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>
代碼解釋：
- CSS 的 opacity 屬性定義整個(gè)元素的透明值（合法的范圍是：0 - 1）
帶圓角矩形：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
代碼解釋：
rx 和 ry 屬性可使矩形產(chǎn)生圓角凿滤。
<circle> 標(biāo)簽
<circle> 標(biāo)簽可用來創(chuàng)建一個(gè)圓妈橄。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
代碼解釋：
cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)庶近。如果省略 cx 和 cy，圓的中心會(huì)被設(shè)置為 (0, 0)
r 屬性定義圓的半徑眷蚓。
<ellipse> 標(biāo)簽
<ellipse> 標(biāo)簽可用來創(chuàng)建橢圓鼻种。橢圓與圓很相似。不同之處在于橢圓有不同的 x 和 y 半徑沙热，而圓的 x 和 y 半徑是相同的叉钥。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
代碼解釋：
- cx 屬性定義圓點(diǎn)的 x 坐標(biāo)
- cy 屬性定義圓點(diǎn)的 y 坐標(biāo)
- rx 屬性定義水平半徑
- ry 屬性定義垂直半徑
三個(gè)累疊而上的橢圓示例：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
</svg>
組合了兩個(gè)橢圓示例：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
</svg>
<line> 標(biāo)簽
<line> 標(biāo)簽用來創(chuàng)建線條。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
代碼解釋
- x1 屬性在 x 軸定義線條的開始
- y1 屬性在 y 軸定義線條的開始
- x2 屬性在 x 軸定義線條的結(jié)束
- y2 屬性在 y 軸定義線條的結(jié)束
<polygon> 標(biāo)簽
<polygon> 標(biāo)簽用來創(chuàng)建含有不少于三個(gè)邊的圖形篙贸。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
代碼解釋
points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)
四邊形示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
<polyline> 標(biāo)簽
<polyline> 標(biāo)簽用來創(chuàng)建僅包含直線的形狀投队。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
<path> 標(biāo)簽
<path> 標(biāo)簽用來定義路徑。
下面的命令可用于路徑數(shù)據(jù)：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
注釋：以上所有命令均允許小寫字母爵川。大寫表示絕對(duì)定位敷鸦，小寫表示相對(duì)定位。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
上面的例子定義了一條路徑，它開始于位置 250 150扒披，到達(dá)位置 150 350值依，然后從那里開始到 350 350，最后在 250 150 關(guān)閉路徑碟案。
查看示例
螺旋示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
SVG 濾鏡
在 SVG 中愿险，可用的濾鏡有：
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
注釋：可以在每個(gè) SVG 元素上使用多個(gè)濾鏡！
必須在<defs>標(biāo)簽中定義 SVG 濾鏡价说。
高斯模糊（Gaussian Blur）
<filter> 標(biāo)簽用來定義 SVG 濾鏡辆亏。<filter> 標(biāo)簽使用必需的 id 屬性來定義向圖形應(yīng)用哪個(gè)濾鏡？
<filter> 標(biāo)簽必須嵌套在 <defs> 標(biāo)簽內(nèi)鳖目。<defs> 標(biāo)簽是 definitions 的縮寫褒链，它允許對(duì)諸如濾鏡等特殊元素進(jìn)行定義。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
代碼解釋：
-
<filter>標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱（同一濾鏡可被文檔中的多個(gè)元素使用） - filter:url 屬性用來把元素鏈接到濾鏡疑苔。當(dāng)鏈接濾鏡 id 時(shí)甫匹，必須使用 # 字符
- 濾鏡效果是通過
<feGaussianBlur>標(biāo)簽進(jìn)行定義的。fe 后綴可用于所有的濾鏡 -
<feGaussianBlur>標(biāo)簽的 stdDeviation 屬性可定義模糊的程度 - in="SourceGraphic" 這個(gè)部分定義了由整個(gè)圖像創(chuàng)建效果
示例2
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
SVG 漸變
漸變是一種從一種顏色到另一種顏色的平滑過渡惦费。另外兵迅，可以把多個(gè)顏色的過渡應(yīng)用到同一個(gè)元素上。
在 SVG 中薪贫，有兩種主要的漸變類型：
- 線性漸變
- 放射性漸變
線性漸變
<linearGradient> 可用來定義 SVG 的線性漸變恍箭。
<linearGradient> 標(biāo)簽必須嵌套在 <defs> 的內(nèi)部。<defs> 標(biāo)簽是 definitions 的縮寫瞧省，它可對(duì)諸如漸變之類的特殊元素進(jìn)行定義扯夭。
線性漸變可被定義為水平、垂直或角形的漸變：
- 當(dāng) y1 和 y2 相等鞍匾，而 x1 和 x2 不同時(shí)交洗，可創(chuàng)建水平漸變
- 當(dāng) x1 和 x2 相等，而 y1 和 y2 不同時(shí)橡淑，可創(chuàng)建垂直漸變
- 當(dāng) x1 和 x2 不同构拳，且 y1 和 y2 不同時(shí)，可創(chuàng)建角形漸變
SVG 漸變必須在<defs>標(biāo)簽中進(jìn)行定義梁棠。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
代碼解釋
-
<linearGradient>標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱 - fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
-
<linearGradient>標(biāo)簽的 x1置森、x2、y1符糊、y2 屬性可定義漸變的開始和結(jié)束位置 - 漸變的顏色范圍可由兩種或多種顏色組成凫海。每種顏色通過一個(gè) <stop> 標(biāo)簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置男娄。
示例(垂直漸變)
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
放射性漸變
<radialGradient> 用來定義放射性漸變行贪。
<radialGradient> 標(biāo)簽必須嵌套在 <defs> 中把兔。<defs> 標(biāo)簽是 definitions 的縮寫，它允許對(duì)諸如漸變等特殊元素進(jìn)行定義瓮顽。
示例
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
代碼解釋：
<radialGradient> 標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱县好，fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變，cx暖混、cy 和 r 屬性定義外圈缕贡，而 fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個(gè) <stop> 標(biāo)簽來規(guī)定拣播。offset 屬性用來定義漸變的開始和結(jié)束位置晾咪。
示例2
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
