HTML5內(nèi)聯(lián)SVG
HTML5內(nèi)聯(lián)SVG
什么是SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失
SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
借助SVG，我們可以實(shí)現(xiàn)很多同Canvas API類型的繪制操作，但在Canvas元素上繪制文本的時(shí)候，字符會(huì)以像素的方式固定到上面。文本成為了圖像的一部分，除非重新繪制Canvas繪制區(qū)域，否則無(wú)法改變文本內(nèi)容。正因?yàn)槿绱耍珻anvas上面的文本無(wú)法被搜索引擎獲取，而SVG上的文本卻是可搜索的。例如，Google會(huì)對(duì)Web上的SVG內(nèi)容中的文本進(jìn)行索引。
SVG優(yōu)勢(shì)
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優(yōu)勢(shì)在于：
SVG 圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 可在圖像質(zhì)量不下降的情況下被放大
在頁(yè)面中添加SVG
?內(nèi)聯(lián)方式：像HTML中的其它元素一樣使用，在此基礎(chǔ)上可以編寫HTML，JavaScript和SVG的交互應(yīng)用。
<body> <svg width="200" height="200"> </svg> </body>
外聯(lián)方式：通過(guò)<img>元素，在HTML導(dǎo)入外部SVG文件，缺點(diǎn)是無(wú)法編寫與SVG元素進(jìn)行交互的腳本。
? ?<img src="example.svg" />
簡(jiǎn)單的形狀
SVG包含了基本的形狀元素，如矩形、圓形和橢圓。形狀元素的尺寸和位置被定義成了屬性。矩形的屬性有width和height。圓形有一個(gè)表示半徑的r屬性。它們都應(yīng)用CSS語(yǔ)法表示距離，因此單位包括了px 、point 、em等。
矩形：x="50" y="20"表示矩形的起點(diǎn)為(50,20)
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> </svg> </body>
SVG繪制開關(guān)對(duì)象是按對(duì)象文檔中出現(xiàn)的順序進(jìn)行的。如果我們?cè)诋嬐昃匦沃笤佼媹A，那么圓形會(huì)顯示在矩形之上。
增加一個(gè)圓形：
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"> </rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body>
變換SVG元素
SVG中可以將多個(gè)元素結(jié)合起來(lái)，使它們形成一個(gè)組，變?yōu)橐粋€(gè)整體。
<g>元素代表“組”，可以用來(lái)結(jié)合多個(gè)相關(guān)的元素。組內(nèi)成員可以由通過(guò)ID來(lái)引用。些外，組也可以作為一個(gè)整體進(jìn)行變換。如果你為組添加了變換屬性，那么組中所有內(nèi)容都會(huì)進(jìn)行變換。變換屬性包含了旋轉(zhuǎn)、變形、縮放和斜切。
<svg width="200" height="200"> <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </svg>
?復(fù)用內(nèi)容
SVG中的<defs>元素用于定義留待將來(lái)使用的內(nèi)容?？梢杂?lt;use>元素將<defs>定義的內(nèi)容鏈接到需要展示的地方。借助這兩個(gè)元素，你可以多次復(fù)用同一內(nèi)容，消除冗余。
<svg width="200" height="200"> <defs> <g id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </defs> <use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.4)"></use> <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.75)"></use> <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"></use> </svg>
圖案和漸變
<svg> <defs> <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" /> </pattern> <%--漸變--%> <linearGradient id="RedBlackGradient"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <rect x="0" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" /> <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" /> </svg>
路徑
<path> 標(biāo)簽用來(lái)定義路徑。
<path> 標(biāo)簽
<path> 標(biāo)簽用來(lái)定義路徑。
下面的命令可用于路徑數(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不公包含簡(jiǎn)單的形狀，還包含自由形態(tài)的路徑。path元素有一個(gè)d屬性，代表路徑數(shù)據(jù)。在d的值中，M代表移至(Move to)，L代表劃線至(Line to),Q代表二次曲線，Z代表閉合路徑。
<svg width="200" height="200"> <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z" /> </svg>
文本
SVG中文本有點(diǎn)類型于CSS中對(duì)于樣式的定義
<svg width="200" height="200"> <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f" font-size="40px" font-weight="bold">Hello SVG</text> </svg>
SVG 與 Canvas兩者間的區(qū)別
SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。
Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形。
SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器。
在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。
Canvas 是逐像素進(jìn)行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。
