TÌM HIỂU SVG VÀ ỨNG DỤNG - 5 doc

Chương 3. Cấu trúc định dạng tập tin SVG 80 Một số thuộc tính của thành phần ‘ellipse’: cx = “<coordinate>” Toạ độ x của tâm e-lip. Mặc định là “0” cy = “<coordinate>” Toạ độ y của tâm e-lip. Mặc định là “0” rx = “<length>” Bán kính trục x của e-lip. Không nhận giá trị âm. Giá trị âm sẽ gây ra lỗi. Nếu giá trị là “0” thì thành phần này không được hiển thị. ry = “<length>” Bán kích trục y của e-lip Không nhận giá trị âm. Giá trị âm sẽ gây ra lỗi. Nếu giá trị là “0” thì thành phần này không được hiển thị. Ví dụ 1 : Ví dụ sau xây dựng hai hình e-lip trong hệ trục toạ độ người dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’ và thuộc tính ‘transform’ trong thành phần ‘g’ và ‘ellipse’. Cả hai e-lip dùng giá trị mặc định cho thuộc tính ‘cx’ và ‘cy’ (tâm của e-lip). Hình e-lip thứ hai được quay lệch một góc. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example ellipse01 - examples of ellipses</desc> <! Show outline of canvas using 'rect' element > <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g transform="translate(300 200)"> <ellipse rx="250" ry="100" fill="red" /> </g> <ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" /> </svg> Chương 3. Cấu trúc định dạng tập tin SVG 81 Kết quả trên trình duyệt: Hình 3.14. Minh họa thành phần ‘ellipse’ 3.11.4 Đường thẳng – thành phần ‘line’ Thành phần ‘line’ định nghĩa một đoạn thẳng bắt đầu tại một điểm và kết thúc tại một điểm khác. Một số thuộc tính của thành phần ‘line’ x1= “<coordinate>” Toạ độ x của điểm đầu. Mặc định là “0” y1= “<coordinate>” Toạ độ y của điểm đầu. Mặc định là “0” x2= “<coordinate>” Toạ độ x của đ iểm cuối. Mặc định là “0” y2= “<coordinate>” Toạ độ y của điểm cuối. Mặc định là “ Ví dụ 1 : Ví dụ sau xây dựng năm đoạn thẳng trong hệ trục toạ độ người dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’. Các đoạn thẳng có độ dày khác nhau. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example line01 - lines expressed in user coordinates</desc> <! Show outline of canvas using 'rect' element > <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g stroke="green" > Chương 3. Cấu trúc định dạng tập tin SVG 82 <line x1="100" y1="300" x2="300" y2="100" stroke-width="5" /> <line x1="300" y1="300" x2="500" y2="100" stroke-width="10" /> <line x1="500" y1="300" x2="700" y2="100" stroke-width="15" /> <line x1="700" y1="300" x2="900" y2="100" stroke-width="20" /> <line x1="900" y1="300" x2="1100" y2="100" stroke-width="25" /> </g> </svg> Kết qủa trên trình duyệt: Hình 3.15. Minh họa thành phần ‘line’ 3.11.5 Đường gấp khúc – thành phần ‘polylinbe’ Thành phần ‘polyline’ định nghĩa một tập các đoạn thẳng nối trực tiếp với nhau. Thành phần ‘polyline’ định nghĩa một hình mở. Một số thuộc tính của thành phần ‘polyline’: points= “<list-of-points>” Mảng các điểm tạo nên đường gấp khúc. Giá trị các toạ độ tính theo hệ trục toạ độ người dùng hiện tại. Ví dụ 1 : Ví dụ sau xây dựng một đường gấp khúc trong hệ trục tọa độ người dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example polyline01 - increasingly larger bars</desc> <! Show outline of canvas using 'rect' element > <rect x="1" y="1" width="1198" height="398" Chương 3. Cấu trúc định dạng tập tin SVG 83 fill="none" stroke="blue" stroke-width="2" /> <polyline fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" /> </svg> Kết quả trên trình duyệt: Hình 3.16 Minh họa thành phần ‘polyline’ 3.11.6 Đa giác – thành phần ‘polygon’ Thành phần ‘polygon’ định nghĩa một đa giác. Một số thuộc tính của thành phần ‘polygon’: points = “<list-of-points>” Mảng các điểm tạo nên đa giác. Tất cả các toạ độ được tính theo hệ trục toạ độ người dùng hiện tại. Ví dụ 1 : Ví dụ sau xây dựng hai hình đa giác (một ngôi sao và một lục giác) trong hệ trục toạ độ người dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example polygon01 - star and hexagon</desc> <! Show outline of canvas using 'rect' element > <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215 Chương 3. Cấu trúc định dạng tập tin SVG 84 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /> </svg> 3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo 3.12.1 Giới thiệu Đối với tất cả các phương tiện (media), phông nền SVG (SVG canvas) là “không gian để hiển thị nội dung SVG”. Phông nền thì không giới hạn các hướng trong không gian, nhưng nội dung SVG chỉ hiển thị trong một phạm vi hình chữ nhật của phông nền. Phạm vi hình chữ nhật đó được gọi là khung nhìn SVG (SVG viewport). Đối với các phương tiện trực quan (visual media), khung nhìn SVG là phạm vi mà người dùng nhìn thấy nội dung SVG trong đó. Kích thước của khung nhìn SVG (chiề u dài, chiều rộng) được xác định bởi một quá trình thoả thuận giữa phân đoạn tài liệu SVG và cha (có thực hay không tường minh) của nó. Một khi quá trình thoả thuận hoàn tất, tác nhân người dùng SVG được cung cấp các thông tin sau: • Một con số đại diện cho chiều dài tính bằng đơn vị “điểm ảnh” (pixels) của khung nhìn. • Một con số đại diện cho chiều rộng tính bằng đơn vị “điểm ảnh” của khung nhìn. • (không bắt buộc) một giá trị số thực xác định kích thước trong thế giới thực của một “điểm ảnh” (là bao nhiêu mm chẳng hạn). Dùng các thông tin trên, tác nhân người dùng xác định khung nhìn, hệ trục toạ độ khung nhìn ban đầu (viewport coordinate system) và một hệ trục toạ độ người dùng ban đầu (user coordinate system). Cả hai hệ trục toạ độ này có cùng gốc toạ độ trùng với gốc toạ độ củ a khung nhìn (đối với khung nhìn gốc thì gốc toạ độ của Chương 3. Cấu trúc định dạng tập tin SVG 85 khung nhìn là góc trái trên). Một đơn vị toạ độ trong hệ trục toạ độ ban đầu bằng một “điểm ảnh” trong khung nhìn. Hệ trục toạ độ khung nhìn còn được gọi là không gian khung nhìn (viewport space) và hệ trục toạ độ người dùng còn được gọi là không gian người sử dụng (user space). Giá trị chiều dài trong SVG được đo như sau: • Nếu không có đơn vị kèm theo, ví dụ “15”, thì tính theo giá trị đơn vị trong hệ trục to ạ độ người dùng. • Nếu có đơn vị kèm theo, ví dụ “15m” hay “5cm”, thì tính theo hệ đo lường. Các đơn vị chiều dài hỗ trợ là : em, ex, px, pt, pc, cm, mm, in và %. Một không gian người dùng (nghĩa là một hệ trục toạ độ hiện tại mới) có thể được thiết lập tại bất kỳ nơi nào trong một phân đoạn tài liệu SVG bằng các phép biến đổi (transformations) dưới dạng các ma trận biến đổi (transformation matrices) hay các phép biế n đổi đợn như phép quay (rotate), xiên (xskew, yskew), tỉ lệ (scale) và tịnh tiến (translate). Thiết lập một không gian người dùng mới bằng các phép biến đổi hệ trục toạ độ là nền tảng cho đồ họa 2D, cung cấp một phương thức thông thường cho việc kiểm soát kích thước, vị trí, góc quay, độ xiên của các đối tượng đồ hoạ. Một khung nhìn mới cũng có thể được thiết lập. Bằng cách thiết l ập một khung nhìn mới, chúng ta có thể định nghĩa một phạm vi hình chữ nhật mới để các đối tượng đồ họa hiển thị vừa khít trong nó. 3.12.2 Khung nhìn ban đầu Tác nhân người dùng SVG thoả thuận với tác nhân người dùng cha để xác định khung nhìn mà tác nhân người dùng SVG sẽ xây dựng nội dung SVG trong đó. Trong một số trường hợp, nội dung SVG được nhúng trong một tài liệu khác (tài liệu chứa). Tài liệu chứa này có các thuộc tính và các tham số dùng để chỉ định hay Chương 3. Cấu trúc định dạng tập tin SVG 86 cung cấp các thông tin về kích thước của khung nhìn cho nội dung SVG. Nội dung SVG, một cách tuỳ chọn, cung cấp thông tin liên quan đến khung nhìn thích hợp cho nội dung SVG thông qua thuộc tính ‘width’ và ‘height’ trong thành phần ‘svg’ ngoài cùng. Quá trình thoả thuận sử dụng bất kỳ thông tin được cung cấp bởi tài liệu chứa và nội dung SVG để chọn vị trí và kích thước khung nhìn cho nội dung SVG. Thuộc tính ‘width’ trong thành phần ‘svg’ thiết lập chiều dài của khung nhìn, trừ các trường hợp sau: • Nội dung SVG là một tài nguyên được l ưu trữ độc lập và được nhúng bằng tham chiếu (chẳng hạn, nhúng vào tài liệu XHTML qua thành phần ‘object’), hoặc nội dung SVG được nhúng trong một tài liệu chứa. • Và thành phần đang tham chiếu tới nội dung SVG hay tài liệu chứa được định kiểu bằng trang định kiểu CSS hay XSL • Và có các thuộc tính định vị tương thích CSS được chỉ định trong thành phần đang tham chiếu (ví dụ thành phần ‘object’) hay trong thành phần ‘svg’ ngoài cùng của tài liệu chứ a có khả năng thiết lập chiều dài của khung nhìn. Trong các trường hợp này, thuộc tính định vị sẽ thiết lập chiều dài của khung nhìn. Tương tự, nếu có các thuộc tính định vị được chỉ định trong thành phần tham chiếu tới tập tin SVG hay trên thành phần ‘svg’ ngoài cùng tài liệu chứa có khả năng thiết lập chiều rộng của khung nhìn, thì khi đó các thuộc tính định vị này sẽ thiết lập chiề u rộng của khung nhìn; ngược lại, thuộc tính ‘height’ trên thành phần ‘svg’ ngoài cùng của nội dung SVG sẽ thiết lập chiều rộng của khung nhìn. Nếu thuộc tính ‘width’ hay ‘height’ trên thành phần ‘svg’ ngoài cùng đo theo đơn vị ngừơi dùng (không có chỉ định đơn vị đo), khi đó giá trị này được tính theo đơn vị px (pixel). Chương 3. Cấu trúc định dạng tập tin SVG 87 Ví dụ 1 : Trong ví dụ sau, một ảnh SVG được nhúng nội tuyến trong một tài liệu XML được định dạng theo CSS. Bởi vì các thuộc tính định vị CSS khộng được cung cấp trong thành phần ‘svg’ ngoài cùng, nên thuộc tính width= “100px” và height = “200px” xác định kích thước của khung nhìn ban đầu. <?xml version="1.0" standalone="yes"?> <parent xmlns="http://some.url"> <! SVG graphic > <svg xmlns='http://www.w3.org/2000/svg' width="100px" height="200px" version="1.1"> <path d="M100,100 Q200,400,300,100"/> <! rest of SVG graphic would go here > </svg> </parent> 3.12.3 Hệ trục toạ độ ban đầu Đối với thành phần SVG ngoài cùng của nội dung SVG, tác nhân người dùng SVG xác định một hệ trục tọa độ khung nhìn (viewport coordinate system) ban đầu và một hệ trục toạ độ người dùng (user coordinate system) ban đầu. Gốc toạ độ của hai hệ trục toạ độ này trùng với gốc toạ độ của khung nhìn, và mỗi đơn vị trong hệ trục toạ độ ban đầu bằng 1 “ điểm ảnh” (pixel). Trong hầu hết các trường hợp, tài liệu SVG độc lập hay phân đoạn tài liệu SVG được nhúng trong một tài liệu XML cha, thì hệ trục toạ độ khung nhìn ban đầu có gốc toạ độ nằm ở góc trái của khung nhìn với trục x hướng từ trái sang phải, trục y từ trên xuống. Ví dụ 1 : Ví dụ một hệ trục toạ độ ban đầu với gốc toạ độ nằm ở góc trái và trục x hướng sang phải, trục y hướng từ trên xuống. Hệ trục toạ độ người dùng ban đầu có mỗi đơn vị người dùng bằng một “pixel”. Chương 3. Cấu trúc định dạng tập tin SVG 88 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300px" height="100px" version="1.1" <xmlns="http://www.w3.org/2000/svg"> <desc>Example InitialCoords - SVG's initial coordinate system</desc> <g fill="none" stroke="black" stroke-width="3" > <line x1="0" y1="1.5" x2="300" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="100" /> </g> <g fill="red" stroke="none" > <rect x="0" y="0" width="3" height="3" /> <rect x="297" y="0" width="3" height="3" /> <rect x="0" y="97" width="3" height="3" /> </g> <g font-size="14" font-family="Verdana" > <text x="10" y="20">(0,0)</text> <text x="240" y="20">(300,0)</text> <text x="10" y="90">(0,100)</text> </g> </svg> Kết quả trên trình duyệt: 3.12.4 Các phép biến đổi hệ trục toạ độ Một hệ trục toạ độ người dùng mới (nghĩa là một hệ trục toạ độ hiện hiện tại mới – new current coordinate system ) có thể được thiết lập bằng các phép biến đổi thông qua thuộc tính ‘transform’ của thành phần vật chứa hay thành phần đồ họa, hay thông qua thuộc tính ‘viewBox’ của thành phần ‘svg’, ‘symbol’, ‘marker’, ‘pattern’ và thành phần ‘view’. Thuộc tính ‘transform’ và ‘viewBox’ đượ c áp dụng (biến đổi) cho các toạ độ và chiều dài trong hệ trục toạ độ người dùng của thành Hình 3.17. Minh họa hệ trục tọa độ ban đầu Chương 3. Cấu trúc định dạng tập tin SVG 89 phần chứa thuộc tính này và tất cả các thành phần con. Các phép đổi có thể lồng nhau, lúc đó các phép biến đổi sẽ được cộng dồn lại. Ví dụ 2 : Dưới đây là ví dụ về một tài liệu không có phép biến đổi. Chuỗi văn bản được xác định trong hệ toạ độ ban đầu. Kết quả trên trình duyệt: Hình 3.18. Minh họa hiển thị không có phép biến đổi Ví dụ 3 : Thiết lập một hệ trục toạ độ người dùng bằng phép tịnh tiến transfrom= “translate(50,50)” trên thành phần ‘g’ thứ ba. Hệ trục toạ độ người dùng mới có gốc <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Example OrigCoordSys - Simple transformations: original picture</desc> <g fill="none" stroke="black" stroke-width="3" > <! Draw the axes of the original coordinate system > <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="150" /> </g> <g> <text x="30" y="30" font-size="20" font-family="Verdana" > ABC (orig coord system) </text> </g> </svg> [...]... "http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1.dtd"> Example NewCoordSys - New user coordinate system Example Nested - Nested transformations ABC (scale) < /svg> Kết quả trên trình duyệt: Hình 3.20 Minh họa phép quay và phép co giãn Ví dụ 5: Định nghĩa hai hệ trục toạ độ được biến đổi xiên tương đối với hệ trục toạ độ nguyên thủy Example RotateScale - Rotate and scale transforms Example... tin SVG toạ độ tại (50 ,50 ) trong hệ trục toạ độ nguyên thủy Kết quả của phép biến đổi này là một toạ độ (30,30) trong hệ trục toạ độ người dùng mới được ánh xạ thành (80,80) trong hệ trục toạ độ nguyên thủy Như vậy các toạ độ được tính tiến 50 đơn vị trên trục x và 50 đơn vị trên trục y ... phép biến đổi tỉ lệ bổ sung như sau: < /svg> Trong một số trường hợp tác nhân người dùng cần cung cấp một phép tịnh... by 50 user units along each axis > 50 user units along the axes of the new coordinate system > ABC (translated coord system) < /svg> ... x1="1 .5" y1="0" x2="1 .5" y2=" 150 " /> Translate(1) Example Skew - Show effects of skewX and skewY -> 92 Chương 3 Cấu trúc định dạng tập tin SVG . points=" ;50 ,3 75 150 ,3 75 150 ,3 25 250 ,3 25 250 ,3 75 350 ,3 75 350 , 250 450 , 250 450 ,3 75 55 0,3 75 550 ,1 75 650 ,1 75 650 ,3 75 750 ,3 75 750 ,100 850 ,100 850 ,3 75 950 ,3 75 950 , 25 1 050 , 25 1 050 ,3 75 1 150 ,3 75& quot;. tin SVG 84 423,301 350 , 250 277,301 303,2 15 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points=" 850 , 75 958 ,137 .5. stroke-width="10" points=" 850 , 75 958 ,137 .5 958 ,262 .5 850 ,3 25 742,262.6 742,137 .5& quot; /> < /svg& gt; 3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo 3.12.1 Giới thiệu Đối