|
網(wǎng)絡(luò)前端高薪的誘惑，學(xué)習(xí)門(mén)檻低，不管是學(xué)生黨還是工作者，都渴望憑借自己的能力，空閑的時(shí)間，去學(xué)前端。也許是一種愛(ài)好，也許是一種想從事的工作。但它真的那么簡(jiǎn)單嗎？現(xiàn)在，初級(jí)前端的工作，已接近飽和，并處于供過(guò)于求的狀態(tài)，企業(yè)更需要的是具備扎實(shí)的基礎(chǔ)，至少具備后端技能的前端開(kāi)發(fā)工程師。已不像之前所說(shuō)的美工，美工了。在許多大企業(yè)中，前端開(kāi)發(fā)崗位是獨(dú)立的，需要專(zhuān)業(yè)技能。 HTML5內(nèi)聯(lián)SVGHTML5支持內(nèi)聯(lián)SVG。
什么是SVG？SVG指可伸縮矢量圖形(ScalableVectorGraphics) SVG用于定義用于網(wǎng)絡(luò)的基于矢量的圖形 SVG使用XML格式定義圖形 SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失 SVG是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn) SVG優(yōu)勢(shì)與其他圖像格式相比（比如JPEG和GIF），使用SVG的優(yōu)勢(shì)在于： SVG圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改 SVG圖像可被搜索、索引、腳本化或壓縮 SVG是可伸縮的 SVG圖像可在任何的分辨率下被高質(zhì)量地打印 SVG可在圖像質(zhì)量不下降的情況下被放大 瀏覽器支持 InternetExplorer9+,Firefox,Opera,Chrome,和Safari支持內(nèi)聯(lián)SVG。 把SVG直接嵌入HTML頁(yè)面在HTML5中，您能夠?qū)VG元素直接嵌入HTML頁(yè)面中： <!DOCTYPE html><html><body> <svg xmlns="http://www./2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></svg> </body></html> 結(jié)果： 抱歉,你的瀏覽器不支持內(nèi)聯(lián)SVG. SVG與Canvas兩者間的區(qū)別SVG是一種使用XML描述2D圖形的語(yǔ)言。 Canvas通過(guò)JavaScript來(lái)繪制2D圖形。 SVG基于XML，這意味著SVGDOM中的每個(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ì)象。 Canvas與SVG的比較下表列出了canvas與SVG之間的一些不同之處。
以上就是進(jìn)階Web教程：HTML5內(nèi)聯(lián)SVG的全部?jī)?nèi)容， |
|
|
來(lái)自： 碼農(nóng)9527 > 《WEB》
