突襲HTML5之SVG 2D入門1 - SVG綜述
位圖與矢量圖 以前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是位圖，這些圖像格式是基於光柵的。在光柵圖像中，圖像文件定義了圖像中每個像素的顏色值。瀏覽器需要讀取這些值並做出相應行動。這種圖 ...
原文：突襲HTML5之SVG 2D入門12 - SVG DOM
使用腳本可以很方便的完成各種復雜的任務，也是完成動畫和交互的一種主流方式。由於SVG是html的元素，所以支持普通的DOM操作，又由於SVG本質上是xml文檔，所以也有一種特殊的DOM操作，大多稱之為SVG DOM。當然了，由於目前IE不支持SVG，開發基於IE的SVG頁面需要采用不同的方式。這部分的知識大家其實都很熟悉，下面只是簡單的看一下。 HTML頁面中的DOM操作 DOM大家應該很熟悉了 ...
2012-07-20 12:48 0 5298 推薦指數：
相關推薦
突襲HTML5之SVG 2D入門3 - 文本與圖像
SVG中渲染文本 SVG的強大能力之一是它可以將文本控制到標准HTML頁面不可能有的程度，而無須求助圖像或其它插件。任何可以在形狀或路徑上執行的操作（如繪制或濾鏡）都可以在文本上執行。盡管SVG的文本渲染如此強大，但是還是有一個不足之處：SVG不能執行自動換行。如果文本比允許空間長，則簡單 ...
突襲HTML5之SVG 2D入門4 - 筆畫與填充
前面我們重點都在總結各類形狀，文本和圖片，接下來，我們還是和討論canvas一樣，總結一下顏色處理，也就是填充和邊框效果；你會發現這里的內容與canvas基本上是一致的。這些屬性既可以以屬性的形式 ...
突襲HTML5之SVG 2D入門5 - 顏色的表示
SVG和canvas中是一樣的，都是使用標准的HTML/CSS中的顏色表示方法，這些顏色都可以用於fill和stroke屬性。基本有下面這些定義顏色的方式：1. 顏色名字： 直接使用顏色名字red, blue, black...2. rgba/rgb值： 這個也很好理解，例如#ff0000 ...
突襲HTML5之SVG 2D入門6 - 坐標與變換
坐標系統 SVG存在兩套坐標系統：視窗坐標系與用戶坐標系。默認情況下，用戶坐標系與視窗坐標系的點是一一對應的，都為原點在視窗的左上角，x軸水平向右，y軸豎直向下；如下圖所示： SVG的視窗位置一般是由CSS指定，尺寸由SVG元素 ...
突襲HTML5之SVG 2D入門11 - 動畫
交互性 SVG擁有良好的用戶交互性，例如：1. SVG能響應大部分的DOM2事件。2. SVG能通過cursor良好的捕捉用戶鼠標的移動。3. 用戶可以很方便的通過設置svg元素的zoomAndPan屬性的值來實現縮放等效果。4. 用戶可以很方便的把動畫和事件結合起來，完成一些復雜的效果 ...
突襲HTML5之SVG 2D入門9 - 蒙板
SVG支持的蒙板 SVG支持多種蒙板特效，使用這些特性，我們可以做出很多很炫的效果。至於中文中把mask叫做"蒙板"還是"遮罩"就不去區分了，這里都叫做蒙板吧。 SVG支持的蒙板類型： 1. 裁剪路徑(cliping path) 裁剪路徑是由path, text ...
突襲HTML5之SVG 2D入門8 - 文檔結構
前面介紹了很多的基本元素，包括結構相關的組合和重用元素，這里先對SVG的文檔結構中剩下的相關元素簡單總結一下，然后繼續向前領略SVG的其他特性。 SVG文檔的元素基本可以分為以下幾類： 動畫元素：animate, animateColor ...