原文:突襲HTML5之SVG 2D入門1 - SVG綜述

位圖與矢量圖 以前,瀏覽器中顯示的圖形,例如jpeg gif等,都是位圖,這些圖像格式是基於光柵的。在光柵圖像中,圖像文件定義了圖像中每個像素的顏色值。瀏覽器需要讀取這些值並做出相應行動。這種圖像的再現能力比較強,但是在某些情形下會顯得不足。例如,當瀏覽器以不同大小顯示一副圖像時,通常會產生鋸齒邊緣,這時,瀏覽器不得不為那些在原始圖像中不存在的像素插入或猜測數值 這樣會導致圖像失真。此外,針對位圖 ...

2012-03-15 13:27 3 12496 推薦指數:

查看詳情

突襲HTML5SVG 2D入門12 - SVG DOM

使用腳本可以很方便的完成各種復雜的任務,也是完成動畫和交互的一種主流方式。由於SVGhtml的元素,所以支持普通的DOM操作,又由於SVG本質上是xml文檔,所以也有一種特殊的DOM操作,大多稱之為SVG DOM。當然了,由於目前IE不支持SVG,開發基於IE的SVG頁面需要采用 ...

Fri Jul 20 20:48:00 CST 2012 0 5298
突襲HTML5SVG 2D入門3 - 文本與圖像

SVG中渲染文本   SVG的強大能力之一是它可以將文本控制到標准HTML頁面不可能有的程度,而無須求助圖像或其它插件。任何可以在形狀或路徑上執行的操作(如繪制或濾鏡)都可以在文本上執行。盡管SVG的文本渲染如此強大,但是還是有一個不足之處:SVG不能執行自動換行。如果文本比允許空間長,則簡單 ...

Mon Apr 09 20:50:00 CST 2012 0 8533
突襲HTML5SVG 2D入門4 - 筆畫與填充

  前面我們重點都在總結各類形狀,文本和圖片,接下來,我們還是和討論canvas一樣,總結一下顏色處理,也就是填充和邊框效果;你會發現這里的內容與canvas基本上是一致的。這些屬性既可以以屬性的形式 ...

Sat Apr 14 23:03:00 CST 2012 1 6857
突襲HTML5SVG 2D入門5 - 顏色的表示

  SVG和canvas中是一樣的,都是使用標准的HTML/CSS中的顏色表示方法,這些顏色都可以用於fill和stroke屬性。基本有下面這些定義顏色的方式:1. 顏色名字: 直接使用顏色名字red, blue, black...2. rgba/rgb值: 這個也很好理解,例如#ff0000 ...

Sat Apr 14 23:08:00 CST 2012 2 4558
突襲HTML5SVG 2D入門2 - 圖形繪制

基本形狀  SVG提供了很多的基本形狀,這些元素可以直接使用,這一點比canvas好多了。廢話不說了,直接看例子,這個最直接: < svg width ="200" height ="250" > < rect x ...

Fri Apr 06 20:38:00 CST 2012 10 22645
突襲HTML5SVG 2D入門7 - 重用與引用

前面介紹了很多的圖形元素,如果很多圖形本身是一樣的,需要每次都去定義一個新的么?我們能否共用一些圖形呢?這是這節的重點 - SVG元素的重用。 組合 - g元素 g元素是一種容器,它組合一組相關的圖形元素成為一個整體;這樣,我們就可以對這個整體進行操作。這個元素通常 ...

Thu May 17 21:05:00 CST 2012 2 4349
突襲HTML5SVG 2D入門10 - 濾鏡

濾鏡稱得上是SVG最強大的功能了,它允許你給圖形(圖形元素和容器元素)添加各種專業軟件中才有的濾鏡特效。這樣你就很容易在客戶端生成和修改圖像了。而且濾鏡並沒有破壞原有文檔的結構,所以維護性也很好。 濾鏡用filter元素定義;需要使用的時候,在需要濾鏡效果的圖形或容器上添加 ...

Wed Jun 13 21:06:00 CST 2012 1 3784
突襲HTML5SVG 2D入門6 - 坐標與變換

坐標系統  SVG存在兩套坐標系統:視窗坐標系與用戶坐標系。默認情況下,用戶坐標系與視窗坐標系的點是一一對應的,都為原點在視窗的左上角,x軸水平向右,y軸豎直向下;如下圖所示:   SVG的視窗位置一般是由CSS指定,尺寸由SVG元素 ...

Mon May 07 21:03:00 CST 2012 1 6953
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM