"編輯培力/SVG(一)" 修訂間的差異
(→五、群組) |
|||
| 行 211： | 行 211： | ||
*就算有設定<g>的x,y值，但就是完全沒有反應，如果要控制<g>的位置，就要用transform了。 | *就算有設定<g>的x,y值，但就是完全沒有反應，如果要控制<g>的位置，就要用transform了。 | ||
*利用transform=”translate(40 20)”，就可以位移了，這用法和CSS3 transform相當接近，雖然類似x,y但本質上還是有所不同。 | *利用transform=”translate(40 20)”，就可以位移了，這用法和CSS3 transform相當接近，雖然類似x,y但本質上還是有所不同。 | ||
| − | + | <svg width="100%" height="150"> | |
| − | + | <g transform="rotate(-10)"> | |
| − | + | <rect y="10" width="100" height="100" style="stroke: #777; stroke-width: 3; fill: #07B492;"/> | |
| − | + | <text x="0" y="130" style="stroke: pink; fill: white"> SVG</text> | |
| − | + | </g> | |
| − | + | </svg> | |
*像以上這樣，<g>群組就會被旋轉(-10 deg)。 | *像以上這樣，<g>群組就會被旋轉(-10 deg)。 | ||
*在G裡面的元素，都會被外層<g>所設定的樣式影響，像以下內部的元素沒有設定外框，但卻可以繼承其父層的<g>樣式。 | *在G裡面的元素，都會被外層<g>所設定的樣式影響，像以下內部的元素沒有設定外框，但卻可以繼承其父層的<g>樣式。 | ||
於 2019年11月27日 (三) 05:17 的修訂
編輯培力/SVG(一)
目錄
SVG
一、概述
- 何謂 SVG
- 可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
- svg放大不毛邊
- 用程式碼構成一張圖
- 步驟
- 宣告格式(版本 字格式 是否獨立存在)
- SVG開始(格式、長寬)
- SVG結束
- 可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
- 點陣圖與向量圖的比較(含附檔名)
- 失真壓縮可以減少儲存圖片所需要的空間大小，在螢幕上觀看圖片時，其實這影響不大，因為，人的眼睛對光線比較敏感，光線對景物的作用比顏色的作用更為重要，這就是失真壓縮技術的基本依據，失真壓縮的特點是保持顏色的逐漸變化，刪除圖片中顏色的突然變化，生物學中的大量實驗證明，人類大腦會利用與附近最接近的顏色來填補所丟失的顏色，例如:對於藍色天空背景上的一朵白雲
- 失真壓縮的方法就是刪除圖片中景物邊緣的某些顏色部分，當在螢幕上看這幅圖時，大腦會利用在景物上看到的顏色填補所丟失的顏色部分，利用有損壓縮技術，某些數據被有意地刪除了，而被取消的數據也不再恢復
- 利用有損壓縮技術可以大大地壓縮檔案的數據，但是，會影響圖片的品質，如果使用了有損壓縮的圖片僅在螢幕上顯示，可能對圖片質量影響不太大，至少對於人類眼睛的識別程度來說區別不大，可是，如果要把一幅經過有損壓縮技術處理的圖片用高分辨率印表機列印出來，那麼圖片質量就會有明顯的受損痕跡。
- 非失真壓縮
- 非失真壓縮的基本原理是相同的顏色訊息只需儲存一次，壓縮圖片的軟體首先會確定圖片中哪些區域是相同的，哪些是不同的，包括了重複數據的圖片(如藍天)就可以被壓縮，只有藍天的起始點和終結點需要被記錄下來，但是藍色可能還會有不同的深淺，天空有時也可能被樹木、山峰或其他的對象掩蓋，這些就需要另外記錄，從本質上看，非失真壓縮的方法可以刪除一些重複數據，大大減少要在磁片上儲存的圖片尺寸，但是，無損壓縮的方法並不能減少圖片的影別空間佔用量。
- 這是因為，當從磁片上讀取圖片時，軟體又會把丟失的像素用適當的顏色訊息填充進來，如果要減少圖片佔用內存的容量，就必須使用失真壓縮方法，非失真壓縮方法的優點是能夠比較好地儲存圖片的品質，但是，相對來說這種方法的壓縮率比較低，不過，如果需要把圖片用高分辨率的印表機列印出來，最好還是使用非失真壓縮，幾乎所有的圖片檔案都採用各自簡化的格式名作為檔案副檔名，從副檔名就可知道這幅圖片是按什麼格式存儲的，應該用什麼樣的軟體去讀／寫等等。
- 點陣圖檔案格式
- pug
- jpg
- gif
- BMP
- PCX
- EPS
- UFO
- DXF
- TIFF
- TGA
- EXIF
- FPX
- SVG
- BMP：是一種與硬體設備無關的圖片檔案格式，使用非常廣，它採用位映射存儲格式，除了圖片深度可選以外，不採用其他任何壓縮，因此，"BMP"檔案所佔用的空間很大，"BMP"檔案的圖片深度可選，l bit、4 bit、8 bit 及 24 bit，"BMP"檔案存儲數據時，圖片的掃描模式是按從左到右、從下到上的順序，由於 BMP 檔案格式是 Windows 環境中交換與圖有關的數據的一種標準，因此在 Windows 環境中營運的圖形圖片軟體都支援 BMP 圖片格式，典型的 BMP 圖片檔案由三部分組成︰位圖檔案頭數據架構 － 包含 BMP 圖片檔案的類型、顯示內容等訊息，位圖訊息數據架構 － 包含 BMP 圖片的寬、高、壓縮方法定義顏色。
- GIF:GIF（Graphics Interchange Format）的原義是〝圖片互換格式〞，是 CompuServe 公司在 1987 年開發的圖片檔案格式，GIF 檔案的數據，是一種基於，"LZW"算法的連續色調的無損壓縮格式，其壓縮率一般在 50％ 左右，它不屬於任何應用程式，目前幾乎所有相關軟體都支援它，有大量的軟體在使用GIF圖片檔案，GIF 圖片檔案的數據是經過壓縮的，而且是採用了可變長度等壓縮算法，所以 GIF 的圖片深度從 l bit 到 8 bit，也即 GIF 最多支援256種色彩的圖片，GIF 格式的另一個特點是其在一個，GIF 檔案中可以存多幅彩色圖片，如果把存於一個檔案中的多幅圖片數據逐幅讀出並顯示到螢幕上，就可構成一種最簡單的動畫，GIF 解碼較快，因為採用隔行存放的 GIF 圖片，在邊解碼邊顯示的時候可分成四遍掃描，第一遍掃描雖然只顯示了整個圖片的八分之一，第二遍的掃描後也只顯示了1／4，但這已經把整幅圖片的概貌顯示出來，所以在顯示GIF圖像時，隔行存放的圖像會給您感覺到它的顯示速度似乎要比其他圖像快一些，這是隔行存放的優點。可動畫，256色，也不是公開格式。
- JPG：點陣圖壓縮，普遍應用，非公開格式，但從沒收過錢，是專利。JPEG 是 Joint Photographic Experts Group（聯合圖片專家組）的縮寫，檔案副檔名為〝.jpg〞或〝.jpeg〞，是最常用的圖片檔案格式，由一個軟體開發聯合會組織製定，是一種失真壓縮格式，能夠將圖片壓縮在很小的儲存空間，圖片中重複或不重要的資料會被丟失，因此容易造成圖片數據的損傷，尤其是使用過高的壓縮比例，將使最終解壓縮後恢復的圖片質量明顯降低，如果追求高品性圖片，不宜採用過高壓縮比例，但是JPEG壓縮技術十分先進，它用有損壓縮模式去除冗餘的圖片數據，在獲得極高的壓縮率的同時能展現十分豐富生動的圖片，換句話說，就是可以用最少的磁片空間得到較好的圖片品質，而且 JPEG是一種很靈活的格式，具有調節圖片質量的功能，允許用不同的壓縮比例對檔案進行壓縮，支援多種壓縮級別，壓縮比率通常在 10︰1 到 40︰1 之間，壓縮比越大，品質就越低，相反地，壓縮比越小，品質就越好，比如可以把 1.37 Mb 的 BMP 位圖檔案壓縮至 20.3 KB，當然也可以在圖片質量和檔案尺寸之間找到平衡點。JPEG 格式壓縮的主要是高頻訊息，對色彩的訊息保留較好，適合應用於網路，可減少圖片的傳輸時間，可以支援24 bit 真彩色，也普遍應用於需要連續色調的圖片，JPEG 格式是目前網路上最流行的圖片格式，可以把檔案壓縮到最小的格式，在 Photoshop 軟體中以，JPEG 格式儲存時，提供11級壓縮級別，以 0─10 級表示，其中 0 級壓縮比最高，圖片品質最差，即使採用細節幾乎無損的10 級質量儲存時，壓縮比也可達 5︰1，以BMP格式儲存時得到 4.28MB 圖片檔案，在採用 JPG 格式儲存時，其檔案僅為 178 KB 壓縮比達到24︰1，經過多次比較，採用第 8 級壓縮為存儲空間與圖片質量兼得的最佳比例，JPEG 格式的應用非常廣泛，特別是在網路和光碟讀物上，都能找到它的身影，目前各類瀏覽器均支援。
- PCX:最先的PCX 雛形是出現在由ZSOFT 公司推出的名叫 PC PAINBRUSH 的用於繪畫的商業套裝軟件中，以後，微軟公司將其移植到 Windows 環境中，成為 Windows 系統中一個次功能，先在微軟的 Windows 3.1 中廣泛應用，隨著 Windows 的流行、升級 加之其強大的圖片處理能力，使 PCX 同 GIF、TIFF、BMP 圖片檔案格式一起，被越來越多的圖形圖片軟體工具所支援，也越來越得到人們的重視。PCX 是最早支援彩色圖片的一種檔案格式，現下最高可以支援 256 種彩色，PCX 設計者很有眼光地超前引入了彩色圖片檔案格式，使之成為現下非常流行的圖片檔案格式，PCX 圖片檔案由檔案頭和實際圖片數據構成，檔案頭由 128 位元組組成，描述版本訊息和圖片顯示設備的橫向、縱向分辨率，以及調色板等訊息，在實際圖片數據中，表示圖片數據類型和彩色類型，PCX 圖片檔案中的數據都是用，PCXREL技術壓縮後的圖片數據，PCX 是 PC 畫筆的圖片檔案格式，PCX 的圖片深度可選為 l、4、8 bit，由於這種檔案格式出現較早，它不支援真彩色，PCX 檔案採用 RLE 行程編碼，檔案體中存放的是壓縮後的圖片數據，因此，將采集到的圖片數據寫成 PCX 檔案格式時，要對其進行 RLE 編碼， 而讀取一個 PCX 檔案時首先要對其進行 RLE 解碼，才能進一步顯示和處理。
- TIFF:TIFF（TaglmageFileFormat）圖片檔案是由 Aldus 和 Microsoft 公司，為桌上系統研製開發的一種較為通用的圖片檔案格式，TIFF格式靈活易變，它定義了四類不同的格式。
- TIFF-B 適用於二值圖片
- TIFF-G 適用於黑白灰度圖片
- TIFF-P 適用於帶調色板的彩色圖片
- TIFF-R 適用於 RGB 真彩圖片
- TIFF 支援多種編碼方法 其中包括 RGB 無壓縮 RLE 壓縮及 JPEG 壓縮等，TIFF 是現存圖片檔案格式中最複雜的一種，它具有擴展性、方便性、可改性，可以提供給 IBMPC 等環境中營運、圖片編輯程式，TIFF 圖片檔案由三個數據架構組成，分別為檔案頭，一個或多個稱為 IFD 的包含標記指標的目錄以及數據本身，TIFF 圖片檔案中的第一個數據架構稱為圖片檔案頭或 IFH，這個架構是一個TIFF檔案中唯一的、有固定位置的部分，IFD 圖片檔案目錄是一個位元組長度可變的訊息塊，Tag標記是TIFF檔案的核心部分，在圖片檔案目錄中定義了要用的所有圖片參數，目錄中的每一目錄條目就包含圖片的一個參數。
- TGA:TGA 格式是由美國 Truevision 公司為其顯示卡開發的一種圖片檔案格式，檔案後綴為〝.tga〞，已被國際上的圖形、圖片工業所接受，TGA 的架構比較簡單，屬於一種圖形、圖片數據的通用格式，在多媒體領域有很大影響 是電腦生成圖片向電視轉換的一種首選格式，TGA 圖片格式最大的特點是可以做出不規則形狀的圖形、圖片檔案，一般圖形、圖片檔案都為四方形，若需要有圓形、菱形甚至是縷空的圖片檔案時，TGA 可就派上用場了，TGA 格式支援壓縮，使用不失真的壓縮算法。
- EXIF:EXIF 的格式是 1994 年富士公司提倡的數位相機圖片檔案格式，其實與 JPEG 格式相同 區別是除儲存圖片數據外，還能夠存儲攝影日期、使用光圈、快門、閃光燈數據等曝光資料，和附帶訊息以及小尺寸圖片。
- FPX:FPX 圖片檔案格是由柯達、微軟、HP 及 Live PictureInc 聯合研製，並於1996年6月正式發表，FPX 是一個擁有多重分辯率的影像格式，即影像被儲存成一系列高低不同的分辨率，這種格式的好處是當影像被放大時仍可維持影像的質素，另外 當修飾 FPX 影像時，只會處理被修飾的部分，不會把整幅影像一並處理，而減少 CPU 及記憶體的負擔，降低影像處理時間。
- PSD:這是 Photoshop 圖片處理軟體的專用檔案格式，副檔名是〝.psd〞 可以支援圖層、通道和不同色彩模式的各種圖片特徵，是一種非壓縮的原始檔案儲存格式，掃描器不能直接生成該種格式的檔案，PSD 檔案有時容量會很大，但，由於可以保留所有原始訊息，在圖片處理中對於尚未製作完成的圖片，選用 PSD 格式儲存是最佳的選擇。
- CDR:CDR 格式是著名繪圖軟體 CorelDRAW 的專用圖形檔案格式，由於 CorelDRAW 是向量圖形繪製軟體，所以 CDR 可以記錄檔案的屬性、位置和分頁等，但它在兼容度上比較差，所有CorelDraw應用程式中均能夠使用，但其他圖片編輯軟體打不開此類檔案。
- PCD:PCD 是 Kodak PhotoCD 的縮寫 副檔名是〝.pod〞，是 Kodak 開發的一種 Photo CD 檔案格式，其他軟體系統只能對其進行讀取，該格式使用 YCC 色彩模式定義圖片中的色彩
，YCC 和 CIE 色彩空間包含比顯示器和列印設備的 RGB 色和 CMYK 色多得多的色彩，PhotoCD 圖片大多具有非常高的質量。
- DXF:DXF 是 Drawing Exchange Format 的縮寫，副檔名是〝.dxf〞，是AutoCAD中的圖形檔案格式，它以ASCII模式儲存圖形，在表現圖形的大小方面十分精確，可被 CorelDraw 和 3DS 等大型軟體調用編輯。
- UFO:這是著名圖片編輯軟體 Ulead Photolmapct 的專用圖片格式，能夠完整地記錄所有 Photolmapct處理過的圖片屬性，值得一提的是，UFO檔案以對象來代替圖層記錄圖片訊息。
- EPS:EPS 是 Encapsulated Postscript 的縮寫 是跨平台的標準格式，副檔名在 PC上是〝.eps〞 在 Macintosh 是〝.epsf〞，主要用於向量圖片和光閘極圖片的存儲，EPS 格式採用 Postscript 語言進行描述，並且可以儲存其他一些類型訊息。例如：多色調曲線、Alpha通道、分色、剪輯路徑、掛網訊息和色調曲線等。因此 EPS 格式常用於印刷或列印輸出，Photoshop 中的多個EPS格式選項可以實現印刷列印的綜合控制，在某些情況下甚至優於TIFF格式。
- PNG:每個點都是原色，不失真公開格式，PNG（Portable Networf Graphics）的原名稱為〝可移性網路圖片〞，是網上接受的最新圖片檔案格式，PNG 能夠提供長度比 GIF 小 30％ 的無損壓縮圖片檔案，它同時提供 24 位和 48 位真彩色圖片支援以及其他諸多技術性支援，由於 PNG 非常新，所以，目前並不是所有的程式都可以用它來存儲圖片檔案，但 Photoshop 可以處理 PNG 圖片檔案，也可以用 PNG 圖片檔案格式存儲。
二、基本架構
- 基本架構
- 步驟一：開啟fielzilla，連線至站台
- 步驟二：home>www>SVG，在這個資料夾中，建立新檔案。
- 步驟三：命名為：flower(記得要加入副檔名.svg)
- 步驟四：寫入程式碼。
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
</svg>
- 基本樣式
- line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
- polyline(多點成線)，諸屬性如下：
- points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
- polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
- points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
- circle(圓)，諸屬性如下：
- cx(圓心x座標)，cy(圓心y座標)，r(半徑)
- rect(矩形)，諸屬性如下：
- width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
- ellipse(楕圓)，諸屬性如下：
- cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。
- 基本圖形
- stroke (線條顏色)，
- stroke-width (線條寬度)，
- stroke-opacity (線條顏色的透明度，合法的範圍是：0 - 1，0最透明，預設1)，
- stroke-linecap (線條端點形狀，預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形)，
- stroke-linejoin (線條轉彎處樣式，預設miter尖角、round圓角、bevel斜角)，
- stroke-miterlimit (尖角內外距/線寬的最大值，不設限則尖角可以拉長至無限長，預設為 4 倍)，
- stroke-dasharray (預設none，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字)
- 顏色部分：
- fill (填充顏色)，
- fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。
- fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)
三、文字
- 範例一(text.svg)原始碼：
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'> <text x='40' y='50' style='font-family:kaiti;fill:#666666'>羅馬</text> </svg>
- 在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
- 可用中文字形：
- Monospace：等寬字型(非調和字)
- Sans：無襯線體(黑體，哥德體)
- Serif：襯線體(筆畫末端的裝飾細節，白體，羅馬體)
- KaiTi：楷體
- MingLiU：明體
- PMingLiU：明體
- MingLiU_HKSCS：明體
- FangSong：仿宋
- NSimSun：新宋
- SimHei：新黑
- Microsoft YaHei：微軟雅黑體
- Microsoft JhengHei：微軟正黑體
- Arial Unicode MS：微軟 Arial 體
- DFBiaoKaiShu-B5：華康楷書體
- DFHKStdKai-B5：華康標楷體
- DFHKStdSong-B5：華康標宋體
- DFBiaoSong-B5：華康宋體
- DFHeiUBlod-B5：華康特粗黑體
- DFHeiBlod-B5：華康粗黑體
- DFHeiMedium-B5：華康中黑體
- DFHeiLight-B5：華康細黑體
- DFBiaoKaiShu-B5：華康楷書體
- …：華康眾字體，族繁不及備載
- Segoe UI：微軟 Segoe UI 字形
- Tahoma：微軟 Tahoma 字形
- Meiruo：日文明瞭體
- Meiruo UI：日文明瞭體
- MS Gothic：微軟日文哥德體
- MS Mincho：微軟日文明朝體
- MS PGothic：微軟日文哥德體
- MS PMincho：微軟日文明朝體
- MS UI Gothic：微軟日文哥德體
- MS Mincho：微軟日文明朝體
- 屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。
- 屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。
- 屬性 fill 控制填入字的顏色，預設黑色
- 屬性 stroke 控制字描框的顏色，預設 none
- 屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。
- 用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。
其他進階屬性：
- text-decoration 屬性，有以下諸值：
- underline：底線
- overline：頂線
- line-through：刪除線
- blink：閃爍
- none：無，預設值
- inherit：繼承
- textLength 及 lengthAdjust ，前者設定字串的總長度，後者設定要怎麼湊到這個長度，有兩個值：
- lengthAdjust='spacing' 靠調整字距來湊足字串的長度。
- lengthAdjust='spacingAndGlyphs' 靠把字拉胖來湊足字串的長度。
- 子標籤 TSPAN：就是 span ，其屬性值幾乎和 text 一模一樣，也是 x、y、dx、dy、rotate、textLength。
- 子標籤 textPath：屬性 xlink:href='#path的id' ；屬性 startOffset='xx%' 從 path 的百分之多少開始跑字。path 在 def 中定義，含路徑、填充色、畫框色。
- 屬性 style 控制諸樣式：
- font-size:
- writing-mode:tb;直寫，預設橫寫。
四、位移、旋轉、縮放、歪斜
- 範例二(transform.svg)原始碼：
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg height='100' width='112.5' xmlns='http://www.w3.org/2000/svg' version='1.1'> <line x1='0' y1='50' x2='113' y2='50' style='stroke:#0f0;stroke-dasharray:2 2;stroke-width:0.5pt;' /> <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#000;fill:none;stroke-width:1pt;' transform='translate(25,50)'/> <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/> <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/> <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(100,50) rotate(180) scale(0.8)'/> <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(125,50) rotate(180) scale(0.8) skewX(30)'/> <polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(150,50) rotate(180) scale(0.8) skewY(30)'/> </svg>
- 注意：
- 四個圖形都圍繞凹尖處旋轉，此點是原始圖形的(0,0)點。因為 rotate 都只交代角度，沒有交代繞著哪個中心旋轉，所以就繞預設值(0,0)旋轉。
- 如果混合兩種以上操作，請先平移、再旋轉、再縮放。請看第二個箭頭(藍色)，先旋轉再平移，結果他的平移座標，是旋轉過後的 x 軸和 y 軸，不再是預設的 x 軸和 y 軸。
- 相關屬性說明：
- 平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
- 旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，預設單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則預設值是(0,0)。
- 伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
- 歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)'，x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。
- 作圖練習二(3petal0.svg)(三花瓣)：
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='600' height='600'> <g> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/> </g> </svg>
- 綁成群組(3petal1.svg)：
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'> <g transform='translate(300,48) rotate(30) scale(1.7)'> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/> </g> </svg>
- 墊一張圖(3petal2.svg)：
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'> <image xlink:href='http://jendo.org/~admin/Image15.png' x='0' y='0' width='600' height='600'/> <g> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/> <polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/ </g> </svg>
五、群組
- 上面的文字與方塊已經算是一個群組了，接下來可以在<g>這個元素，使用變形(transform)來一起改變外觀
- 就算有設定<g>的x,y值，但就是完全沒有反應，如果要控制<g>的位置，就要用transform了。
- 利用transform=”translate(40 20)”，就可以位移了，這用法和CSS3 transform相當接近，雖然類似x,y但本質上還是有所不同。
<svg width="100%" height="150">
<g transform="rotate(-10)">
<rect y="10" width="100" height="100" style="stroke: #777; stroke-width: 3; fill: #07B492;"/>
<text x="0" y="130" style="stroke: pink; fill: white"> SVG</text>
</g>
</svg>
- 像以上這樣，<g>群組就會被旋轉(-10 deg)。
- 在G裡面的元素，都會被外層<g>所設定的樣式影響，像以下內部的元素沒有設定外框，但卻可以繼承其父層的<g>樣式。
- 也就像CSS一樣，如果子元素有設定，則子元素優先。
<svg width="100%" height="150">
<g style="stroke: pink; stroke-width: 5px">
<circle cx="40" cy="35" r="30" style="fill: white;"/>
<circle cx="120" cy="35" r="30" style="fill: white;"/>
<rect x="160" y="5" width="40" height="40" style="fill: white;"/>
<rect x="220" y="5" width="40" height="40" style="fill: red;"/>
</g>
</svg>
不過我沒想到的是，svg還可以這樣用，在<g>裡面再放一個<svg>，這樣就可以設定他的x,y，這招太絕了，這樣就可以避免使用translate，使用x,y來設定位置。
<svg width="100%" height="150">
<g>
<svg x="40" y="20">
<rect y="10" width="100" height="100" style="stroke: #777; stroke-width: 3; fill: #07B492;"/>
<text x="0" y="130" style="stroke: pink; fill: white"> SVG</text>
</svg>
</g>
</svg>
六、定義一次，引用多次
- defs 顧名思義就是「definitions」：定義，我們可以把許多重複性質高的元素，放入 defs 元素內，讓它變成一個可以重複利用的物件，原理就有點類似當年 flash 裏頭把一些動畫或是圖案轉換成物件一樣；首先我們來看到最常見的 defs 例子：「重複的圖形」，下面利用 defs 定義了一個矩形的長寬顏色，再使用 use 元素把矩形表現在畫面上，而 use 元素具有 x 與 y 的座標屬性，就可以輕鬆的做出許多不同位置的矩形。
<defs>
<rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
</defs>
<use xlink:href="#rect1"/>
<use xlink:href="#rect1" x="110"/>
也可以將 g 元素 ( 群組 ) 放在 defs 元素裏頭：
<defs>
<g id="g1">
<rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
<circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/>
</g>
</defs>
<use xlink:href="#g1"/>
<use xlink:href="#rect1" x="110"/>
<use xlink:href="#circle1" x="210"/>
定義漸層色
<defs>
<linearGradient id="a1">
<stop offset="5%" stop-color="#F00" />
<stop offset="95%" stop-color="#ff0" />
</linearGradient>
</defs>
<rect x="50" y="250" width="100" height="100" stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
<circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a1)"></circle>
<rect x="290" y="250" width="100" height="100" stroke="url(#a1)" stroke-width="5" fill="none"></rect>
文字路徑(先把貝茲曲線定義好，再把文字套入)
<defs>
<path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
</defs>
<text>
<textPath xlink:href="#a1">這是隨著路徑跑的文字
</textPath>
</text>
使用 defs 定義 filter(把漸層或濾鏡變為ID就能放進矩形、圓形等等圖形中)
<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />
一朵花的程式碼
<rect x="95" y="100" style="width:10;height:200;fill:green;"/> <polygon points="100,110 120,20 100,10 80,20" stroke="yellow" stroke-width="1" fill="#00a0e9"/> <polygon points="100,110 120,20 100,10 80,20" transform="rotate(45 100 100 )" stroke="yellow" stroke-width="1" fill="#00a0e9"/> <polygon points="100,110 120,20 100,10 80,20" transform="rotate(90 100 100 )" stroke="yellow" stroke-width="1" fill="#00a0e9"/> <polygon points="100,110 120,20 100,10 80,20" transform="rotate(135 100 100 )" stroke="yellow" stroke-width="1" fill="#00a0e9"/> <polygon points="100,110 120,20 100,10 80,20" transform="rotate(180 100 100 )" stroke="yellow" stroke-width="1" fill="#00a0e9"/> <polygon points="100,110 120,20 100,10 80,20" transform="rotate(225 100 100 )" stroke="yellow" stroke-width="1" fill="#00a0e9"/> <polygon points="100,110 120,20 100,10 80,20" transform="rotate(270 100 100 )" stroke="yellow" stroke-width="1" fill="#00a0e9"/> <polygon points="100,110 120,20 100,10 80,20" transform="rotate(315 100 100 )" stroke="yellow" stroke-width="1" fill="#00a0e9"/> <circle cx="100" cy="100" r="50" fill="#FF8000"/> <circle cx="85" cy="85" r="4" fill="blac k"/> <circle cx="115" cy="85" r="4" fill="black"/> <circle cx="100" cy="100" r="4" fill="black"/> <path d="M 85,130 Q 100,145 115,130" style="stroke:black;fill:none;"/>
- 花瓣
七、漸層
漸層的類型有兩種，線形漸層和放射形漸層。線形漸層沿直線變化，在 defs元素裡創建一個 <linearGradient> 元素，就創建了一個線形漸層。漸變必須有一個id屬性，否則它不能被其他元素引用，等於白做了。
- 漸層由一種以上的顏色所組成，由一種顏色慢慢轉成另一種顏色，設定好顏色之後，再以ID的形式給漸層。
- 漸層(又稱為「漸變」)是指將構成元素的形狀或色彩做次第改變的層層變化。例如，同一種形狀的漸大或漸小、同一種色彩的漸濃或漸淡，均屬於漸層的形式變化，而在這些漸增或漸減的層次變化中，即能具現出漸層的美感。
- 漸變的基本原理與反覆相類似，但由於其中或形或色的漸次改變，使得畫面較具活潑性，予人生動輕快的感受。中國建築中的寶塔；樂曲中音量的漸強漸弱；文學小說中情節高潮的堆且；大會舞隊型的漸次縮小或擴大……等，都是漸層形式原理的例子。
(一)線性漸層
在上面的例子裡，一個線形漸層被用在<rect>元素上，線形漸層內部有若干 <stop> 節點，它們用來指定漸變應該在什麼位置形成什麼顏色，其中兩個屬性分別是：定義偏移位置的offset屬性和定義顏色的stop-color屬性。另外，它們可以直接設置，或通過CSS設置。上面的例子裡混合使用了這兩種形式。比如，這個例子的漸變是從紅色開始，到中間漸變成黑色，最後漸變到藍色。你可以按照自己的想法設置各種stop-color，但是它們的offset必須是從0%逐漸提高到100%。（如果不加%，就是0-1）。如果有重複的值，不會被分配到xml樹的最後。另外像fill和stroke一樣，你也可以設置一個stop-opacity屬性表示透明度。
<?xml version="1.0" standalone="no"?> <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </linearGradient> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </linearGradient> <style type="text/css"><![CDATA[ #rect1 { fill: url(#Gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> </svg>
- 在上面的例子裡，一個線形漸層被用在<rect>元素上，線形漸層內部有若干 <stop> 節點，它們用來指定漸變應該在什麼位置形成什麼顏色，其中兩個屬性分別是：定義偏移位置的offset屬性和定義顏色的stop-color屬性。另外，它們可以直接設置，或通過CSS設置。上面的例子裡混合使用了這兩種形式。比如，這個例子的漸變是從紅色開始，到中間漸變成黑色，最後漸變到藍色。你可以按照自己的想法設置各種stop-color，但是它們的offset必須是從0%逐漸提高到100%。（如果不加%，就是0-1）。如果有重複的值，不會被分配到xml樹的最後。另外像fill和stroke一樣，你也可以設置一個stop-opacity屬性表示透明度。
- 使用漸變時，我們需要在對象的fill或stroke屬性裡引用它。就像在CSS里通過url來引用其他元素一樣，在這裡，url引用的是我們給漸變設置的id，所以只需要將fill屬性設置成url(#Gradient) ，我們的對象就可以呈現出五彩斑斕的效果。另外你也可以給stroke進行同樣的設置。
- <linearGradient>元素還可以設置其他一些屬性，用來定義尺寸和样式。比如漸變的方向是由兩個點控制的，它們用x1， x2，y1，y2四個屬性控制，形成一條直線，漸變就沿這條直線變化。漸變默認的方向是水平方向，使用這些屬性就可以改變方向。上面例子裡的Gradient2就是一個垂直的漸變。
(二)放射漸層
放射形漸層很類似線形漸層，只不過是從一個點向外發散漸變。在文檔的 defs 段落裡增加一個 <radialGradient> 元素，就可以創建放射形漸層。
<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="Gradient2" cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
- 這個例子的裡，放射形漸層中的stop節點在用法上和前面的線形漸層一樣，但是這裡的圖形對像是中間呈紅色，然後向各個方向發散漸變，直到邊緣漸變到藍色。放射形漸層<radialGradient>也有若干用來定義位置和方向的屬性，不過與線形漸層不同，這裡的設置會稍微複雜一點。放射形漸層裡也可以設置兩個點，用來確定它的範圍。第一個點用來定義一個環，限定漸變的範圍。該點包括坐標屬性cx和cy，以及半徑屬性r。定義這三個屬性，就可以改變漸變的位置和大小，就像上面例子裡的第二個漸變效果。
- 第二個點被稱為焦點，通過坐標屬性fx和fy來確定。第一個點決定的是漸變所處的範圍，而焦點則決定漸變的中心。
<?xml version="1.0" standalone="no"?>
<svg width="120" height="120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient"
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100"
fill="url(#Gradient)" stroke="black" stroke-width="2"/>
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
<circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
- 如果焦點被移動到漸變範圍之外，漸變不可能被正確渲染，所以會被重定義到範圍的邊緣。如果不定義焦點，則默認與漸變範圍的中點是同一點。
- 兩種漸變都可以通過一些屬性，定義諸如變形等樣式。在這裡僅提其中一個：spreadMethod屬性。當漸變已經到達範圍邊緣，但圖形對像還沒被完全填充時，這一屬性將決定接下來會發生什麼。它有三個可用值，"pad", "reflect", 以及 "repeat"。 "pad"的效果你已經看到過了，當漸變到達範圍邊緣，最後一個顏色將用來填充圖形剩下的區域。 "reflect"是繼續漸變，但是會從100%處的顏色漸變會0%的位置，然後再翻過來繼續。 "Repeat"也是讓漸變繼續，不過是跳過返回的過程，直接回到起始狀態，然後重新漸變。
- 柔焦濾鏡與放射漸層的練習
八、柔焦濾鏡
feGaussianBlur(柔焦濾鏡)應該算是 SVG filter 裏頭最簡單的濾鏡，因為它只有一個參數需要注意：stdDeviation，這也是控制模糊程度的參數，數字越大越模糊，數字為零則是圖片原本的狀態，在這邊有一個比較需要注意的地方，就是要記得設定 filter 的filterUnits為 userSpaceOnUse ，因為預設值是會讓 filter 跟隨著套用該 filter 的物件跑，所以要記得設定成跟隨整個 SVG space。
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='160' height='160'> <defs> <radialGradient id='r4' cx='50%' cy='50%' r='50%' > <stop style='stop-color:#fff100' offset='0%' /> <stop style='stop-color:#ff9900;stop-opacity:.98' offset='50%' /> <stop style='stop-color:#ff1700;stop-opacity:.98' offset='100%' /> </radialGradient> <filter id='f1' > <feGaussianBlur stdDeviation='3' /> </filter> </defs> <circle cx='79' cy='79' r='75' style="fill:url(#r4);filter:url(#f1);" /> </svg>
feGaussianBlur後面的stdDeviation='3'用來設定模糊的程度，0就是完全沒有改變。
九、path
用參數(0~1)和控制點作圖：
- 一次：
- 二次：
- 三次：
- 四次：
- 五次：
path示範
標籤：
- set(開關)
- 只用attributeName,to,begin三屬性
- animate(屬性連續改變)
- animateTransform(平移,旋轉,縮放)
- animateMotion(循跡運動)
- 共通語法：將母圖形分拆成開始和結束兩標籤，中間插入動畫標籤。
- 共通屬性：
- attributeName：
- set,animate為某一個母圖形的屬性。from 和 to 就是這個屬性的值將由多少變到多少。
- animateTransform為'transform'另搭配 type 屬性
- animateMotion免設此屬性
- type屬性之值(animateTransform專用)：
- rotate旋轉，影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'。
- scale縮放，影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算，如果同組x,y倍率相同，可以只寫一個值。
- translate平移，影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'。
- skewX X軸不動，X軸下方向右歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
- skewY Y軸不動，Y軸右方向下歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
- begin='幾s'：幾秒開始跑，通常設為 0s 。
- dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。
- repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。
- from 開始狀態(animate,animateTransform有)。
- to 結束狀態(set,animate,animateTransform有)。
- path(animateMotion專用) 屬性為移動路徑：由 m 開始
- rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。
- attributeName：
貝茲曲線
在數學的數值分析領域中，貝茲曲線（英語：Bézier curve，亦作「貝塞爾」）是計算機圖形學中相當重要的參數曲線。更高維度的廣泛化貝茲曲線就稱作貝茲曲面，其中貝茲三角是一種特殊的實例。 貝茲曲線於1962年，由法國工程師皮埃爾·貝茲（Pierre Bézier）所廣泛發表，他運用貝茲曲線來為汽車的主體進行設計。貝茲曲線最初由Paul de Casteljau於1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。
二次貝茲曲線
貝茲曲線的程式碼
<path id='a1' d='M0,50 C150,130 100,0 300,40' style='stroke:#000;fill:none;' />
- 用貝茲曲線設定文字要先在<def></def>寫好，再使用id匯入。
- 所以只需要設定一次，就可以使用設好的ID使用多次。
- 我可以在每一個<textPath></textPath>中放上不一樣的文字，就會有一樣的角度，不同的樣貌
程式碼如下(此為文字)
<textPath startOffset='4%' xlink:href='#a1' style='font-family:KaiTi;fill:pink;font-size:40px'></textPath>
純貝茲曲線指令碼
<path d='M0,0 Q50,50 20,0 T40,0 60,0 80,0 100,0 120,0 140,0 160,0 180,0 200,0' style='stroke:black;fill:none;' transform='translate(0,50)'/>
三次貝茲曲線
三次的程式碼
<path d='M0,50 C50,100 80,0 200 50' style='stroke:blue;fill:none;' />
- 三次與兩次相比更加細緻。
三次與數次貝茲曲線的差異
- 以此類推，雖然曲線細緻度不同，但底層的原理一樣。
十、動畫
- 共通屬性：
- attributeName：
- set,animate為某一個母圖形的屬性。from 和 to 就是這個屬性的值將由多少變到多少。
- animateTransform為'transform'另搭配 type 屬性
- animateMotion免設此屬性
- type屬性之值(animateTransform專用)：
- rotate旋轉，影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'。
- scale縮放，影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算，如果同組x,y倍率相同，可以只寫一個值。
- translate平移，影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'。
- skewX X軸不動，X軸下方向右歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
- skewY Y軸不動，Y軸右方向下歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
- begin='幾s'：幾秒開始跑，通常設為 0s 。
- dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。
- repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。
- from 開始狀態(animate,animateTransform有)。
- to 結束狀態(set,animate,animateTransform有)。
- path(animateMotion專用) 屬性為移動路徑：由 m 開始
- rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。
- attributeName：
向前移動並消失的程式碼
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='400' width ='1000'> <defs> <linearGradient id='LG' x1='30%' y1='0%' x2='70%' y2='0%'> <stop offset='0%' style='stop-color:#ffff00;stop-opacity:1' /> <stop offset='100%' style='stop-color:#ff0000;stop-opacity:1' /> </linearGradient> </defs> <circle cx="30" cy="30" r="25" style="stroke: none; fill:url(#LG);"> <animate attributeName="cx" attributeType="XML" from="30" to="1020" begin="0s" dur="3s" fill="remove" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" /> </circle> </svg>
圖形範例
綜合應用：
三角形：
直角三角形：
動畫：
旋轉：
三個方塊的舞蹈：
互動：
