intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

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

Chia sẻ: Cao Tt | Ngày: | Loại File: PDF | Số trang:20

Thêm vào BST
Báo xấu
81
lượt xem 9
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Chương 3. Cấu trúc định dạng tập tin SVG hiện thời được hiển thị trên phương tiện trực quan thì các thành phần ‘desc’ và ‘title’ không được hiển thị. Tuy nhiên các tác nhân người dùng có thể hiển thị thành phần ‘title’ dưới dạng tooltip (gợi ý) khi con trỏ di chuyển qua các thành phần đặc biệt nào đó. Một cách trình diễn thay thế khác cho cả hình ảnh và âm thanh cũng có thể thực hiện, và lúc đó các thành phần ‘desc’ và ‘title’ được hiển thị còn các thành phần ‘path’ thì lại không....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: TÌM HIỂU SVG VÀ ỨNG DỤNG - 4

  1. Chương 3. Cấu trúc định dạng tập tin SVG hiện thời được hiển thị trên phương tiện trực quan thì các thành phần ‘desc’ và ‘title’ không được hiển thị. Tuy nhiên các tác nhân người dùng có thể hiển thị thành phần ‘title’ dưới dạng tooltip (gợi ý) khi con trỏ di chuyển qua các thành phần đặc biệt nào đó. Một cách trình diễn thay thế khác cho cả hình ảnh và âm thanh cũng có thể thực hiện, và lúc đó các thành phần ‘desc’ và ‘title’ được hiển thị còn các thành phần ‘path’ thì lại không. Điều đó thực sự có thể làm được nhờ vào một trang định kiểu khác. Các cấu trúc sâu (deep structure) và các thành phần tham chiếu ‘use’ đôi khi lại mong muốn người dùng khai thác các phần mô tả này. Sau đây là một ví dụ. Tác nhân người dùng SVG không hiển thị các thành phần ‘desc’ và’titile’ nhưng sẽ hiển thị phần nội dung còn lại của thành phần ‘g’. Company sales by region This is a bar chart which shows company sales by region. Các thành phần ‘decs’ và ‘title’ có thể chứa phần văn bản được đánh dấu theo các không gian tên khác. Sau đây là ví dụ: This is an example SVG file The global description uses markup from the 60
  2. Chương 3. Cấu trúc định dạng tập tin SVG Mydoc namespace. Trong ví dụ trên thành phần ‘decs’ chứa văn bản được đánh dấu với không gian tên mydoc= “http://example.org/mydoc”. Các thành của không gian tên mydoc được dùng là mydoc:title, para, và emph. Khi tạo tập tin SVG , tác giả thường thêm một thành phần con ‘title’ vào thành phần ‘svg’ ngoài cùng của tài liệu SVG độc lập. Thành phần con ‘title’ của thành phần ‘svg’ được thêm vào nhằm mục đích mô tả nội dung của phân đoạn SVG được cho. Vì người dùng thường tham khảo tài liệu ngoài ngữ cảnh nên tác giả cần cung cấp các mô tả giàu ngữ cảnh cho tài liệu trong phần mô tả này. Để đảm bảo khả năng truy cập, các tác nhân người dùng thường chỉ cho phép thành phần con ‘title’ của thành phần ‘svg’ ngoài cùng có giá trị với người dùng. Cơ chế này được thực hiện tùy thuộc vào tác nhân người dùng (chẳng hạn như chú thích hay là nói lên cho người dùng nghe). Hiện tại các thành phần của SVG, cụ thể là thành phần vật chứa và thành phần văn bản, không đưa ra các giới hạn về số lượng các thành phần con ‘desc’ và ‘title’. Tính linh động này chỉ có trong thời điểm hiện nay (7/2005). Trong tương lai sẽ có một mô hình nội dung phù hợp cho các thành phần vật chứa, bởi vì một số thành phần vật chứa trong SVG cho phép các nội dung đan xen nhau, và các quy tắc về nội dung đan xen với XML không yêu cầu giới hạn. Trong các phiên bản tới của ngôn ngữ SVG, các quy tắc giới hạn nội dung đan xen sẽ được đưa ra. Người ta khuyên tốt nhất nên có tối đa một thành phần ‘title’ và một thành phần ‘desc’ xuất hiện trong thành phần con của thành phần đặc biệt nào đó. Những thành phần này nên xuất hiện trước các thành phần con khác (có thể ngoại trừ thành phần 61
  3. Chương 3. Cấu trúc định dạng tập tin SVG ‘metadata’) hay nội dung dữ liệu. Nếu các tác nhân người dùng cần thiết chọn giữa nhiều thành phần ‘desc’ và ‘title’ trong việc xử lý (ví dụ, chọn ra một chuỗi dùng làm tooltip), tác nhân người dùng sẽ chọn thành phần đầu tiên. 3.8 Thành phần ‘symbol’: Thành phần ‘symbol’ (biểu tượng) được dùng để định nghĩa các đối tượng mẫu có thể được sử dụng bởi thành phần ‘use’. Chúng ta sử dụng thành phần ‘symbol’ cho các đồ hoạ được dùng nhiều lần trong cùng một tài liệu sẽ tăng thêm tính cấu trúc và ngữ nghĩa cho tài liệu. Các tài liệu giàu cấu trúc sẽ làm tăng khả năng truy cập. Các điểm khác nhau cơ bản giữa thành phần ‘symbol’ và ‘g’: • Một thành phần ‘symbol’ bản thân nó không được hiển thị. Chỉ có thể hiện của nó (một tham chiếu tới thành phần ‘symbol’ bởi thành phần ‘use’) được hiển thị. • Thành phần ‘symbol’ có thuộc tính viewBox và preserveAspectRatio cho phép ‘symbol’ nằm vừa trong khung nhìn hình chữ nhật được định rõ bởi thành phần ‘use’ đang tham chiếu tới nó. Các thành phần cùng họ với ‘symbol’ là ‘marker’ và ‘pattern’. Thành phần ‘symbol’ không bao giờ được hiển thị trực tiếp, chúng chỉ được tham chiếu bởi thành phần ‘use’. Thuộc tính ‘display’ không được dùng cho thành phần ‘symbol’. Vì thế các thành phần ‘symbol’ sẽ không được trực tiếp hiển thị thậm chí thuộc tính ‘display’ được thiết lập một giá trị khác ‘none’. Các thành phần ‘symbol’ luôn ở trạng thái sẵn sàng cho tham chiếu thậm chí khi thuộc tính ‘display’ của thành phần đó hay bất kỳ thành phần cha của nó được thiết lập là ‘none’. 3.9 Thành phần ‘use’: Bất kỳ thành phần nào trong nội dung SVG như ‘svg’, ‘symbol’, ‘g’, thành phần đồ hoạ hay thành phần ‘use’ khác mà có thể là thành phần mẫu đều có thể 62
  4. Chương 3. Cấu trúc định dạng tập tin SVG được dùng lại trong tài liệu SVG bằng thành phần ‘use’ (sử dụng). Thành phần ‘use’ tham chiếu đến thành phần khác và xác định nội dung đồ hoạ được chứa vẽ tại vị trí được cấp trong tài liệu này. Không giống thành phần ‘image’, thành phần ‘use’ không thể tham chiếu đến trọn vẹn một tập tin. Thành phần ‘use’ có các thuộc tính tuỳ chọn ‘x’, ‘y’, ‘width’ và ‘height’ dùng để ánh xạ nội dung đồ hoạ của thành phần được tham chiếu lên một phạm vi hình chữ nhật theo hệ trục toạ độ hiện thời. Kết quả khi dùng thành phần ‘use’ là: nội dung của thành phần được tham chiếu như thể được nhân bản vào trong một cây DOM độc lập không hiện hữu mà cây này có thành phần ‘use’ là cha của các thành phần được tham chiếu; còn cha của thành phần ‘use’ là cha cấp cao hơn của chúng. Bởi vì cây DOM độc lập không hiện hữu nên mô hình đối tượng tài liệu SVG (SVG DOM) chỉ chứa thành phần ‘use’ và thuộc tính của nó. SVG DOM không chỉ rõ các thành phần được tham chiếu là con của thành phần ‘use’. Đối với các tác nhân người dùng hỗ trợ định kiểu với trang định kiểu CSS, thì việc nhân bản các thành phần được tham chiếu vào một cây DOM không có thực cũng sao chép các giá trị thuộc tính nhận được từ CSS trên thành phần được tham chiếu và nội dung của nó. Tuy nhiên sự kế thừa thuộc tính diễn ra như thể thành phần được tham chiếu được chứa nguyên bản là thành phần con của thành phần ‘use’. Thành phần được tham chiếu thừa hưởng tất cả các thuộc tính từ thành phần ‘use’ và các thành phần cha của thành phần ‘use’. Một thể hiện của thành phần được tham chiếu không thừa hưởng các thuộc tính từ thành phần cha của thành phần được tham chiếu. Nếu thuộc tính sự kiện được gắn cho thành phần được tham chiếu thì đối tượng nhận sự kiện (đích) sẽ là đối tượng SVGElementInstance (một thể hiện thành phần SVG) trong cây thể hiện tương ứng với thành phần được tham chiếu. Việc quản lý sự kiện trong cây tài liệu không thực sự tồn tại hoạt động như thể thành phần được tham chiếu là thành phần con của thành phần ‘use’, ngoại trừ một 63
  5. Chương 3. Cấu trúc định dạng tập tin SVG điều là các sự kiện được gửi tới các đối tượng thể hiện SVGElementinstance tương ứng với đích và các thành phần đích hiện thời trong cây con được tham chiếu. Một sự kiện sẽ nhân lên qua các phần không thực sự cũng như thực sự hiện hữu của cây của cây tài liệu giống như cây tài liệu bình thường: đầu tiên sự kiện sẽ đi từ thành phần gốc (root) xuống thành phần ‘use’ và sau đó đi qua các thành phần của cây không thực sự tồn tại trong pha bắt sự kiện. Tiếp sau đó là pha đích tại đích của của sự kiện, sau đó đi dần lên từ cây không thực sự tồn tại đến thành phần ‘use’ và quay về cây bình thường tới thành phần gốc trong pha phát sự kiện lên. Một thành phần và tất cả các đối tượng thể hiện SVGELementInstance tương ứng dùng chung một danh sách lắng nghe sự kiện.Thuộc tính currentTarget (đích hiện tại) của sự kiện có thể được dùng để xác định đối tượng lắng nghe sự kiện nào được triệu gọi. Ứng xử của thuộc tính ‘visibility’ thỏa mô hình thừa hưởng thuộc tính. Do đó khi chỉ định ‘visibility:hidden’ trong thành phần ‘use’ không đảm bảo rằng nội dung được tham chiếu không được hiển thị. Nếu dùng thành phần ‘use’ chỉ định ‘visibility:hidden’ tham chiếu đến thành phần chỉ định ‘visibility:hiddden’ hay ‘visibility:inherit’ thì thành phần này sẽ bị ẩn đi. Tuy nhiên, nếu thành phần được tham chiếu chỉ định ‘visibility:visible’ thì thành phần đó sẽ hiển thị dù thành phần ‘use’ chỉ định là ‘visibility:hidden’. Nếu thành phần được tham chiếu là ảnh động thì thể hiện của nó cũng là ảnh động. Một thành phần ‘use’ có cùng kết quả hiển thị như thể nó được thay thể bởi nội dung được phát sinh: • Nếu thành phần ‘use’ tham chiếu tới một thành phần ‘symbol’: Trong nội dung được phát sinh, thành phần ‘use’ sẽ được thay thế bởi thành phần ‘g’, tất cả các thuộc tính của ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:href’ đều được chuyển sang thành phần ‘g’. Một phép biến đổi tịnh tuyến translate(x,y) được bổ sung vào cuối của thuộc tính ‘transform’ của thành phần ‘g’ được phát sinh, với x và y của phép biến đổi 64
  6. Chương 3. Cấu trúc định dạng tập tin SVG trên là giá trị thuộc tính ‘x’ và ‘y’ của thành phần ‘use’. Thành phần ‘symbol’ được tham chiếu và nội dung của nó được nhân bản lên và đưa vào cây được phát sinh, với một ngoại lệ là thành phần ‘symbol’ được thay thế bằng một thành phần ‘svg’. Thành phần ‘svg’ được phát sinh này sẽ có các giá trị thuộc tính rõ ràng ‘width’ và ‘height’. Nếu thuộc tính ‘width’ và/hoặc ‘height’ được cung cấp trong thành phần ‘use’, thì các thuộc tính này sẽ được chuyển vào thành phần ‘svg’ đựơc phát sinh. Nếu thuộc tính ‘width’ và/hoặc ‘height’ không được chỉ định thì thành phần ‘svg’ được phát sinh sẽ dùng giá trị “100%” cho những thuộc tính này. • Nếu thành phần ‘use’ tham chiếu tới thành phần ‘svg’: Trong nội dung phát sinh, thành phần ‘use’ sẽ được thay thế bằng thành phần ‘g’, khi đó tất cả các thuộc tính của thành phần ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:href’ đều được chuyển sang thành phần ‘g’. Một phép biến đổi tịnh tuyến translate(x,y) được bổ sung vào cuối của thuộc tính ‘transform’ của thành phần ‘g’ được phát sinh, với x và y của phép biến đổi trên là giá trị thuộc tính ‘x’ và ‘y’ của thành phần ‘use’. Thành phần ‘svg’ được tham chiếu và nội dung của nó được nhân bản vào cây được phát sinh. Nếu thuộc tính ‘width’ và/hoặc ‘height’ được cung cấp trong thành phần ‘use’, thì các giá trị này sẽ đè (override) lên các thuộc tính tương ứng của thành phần ‘svg’ trong cây phát sinh. • Những trường hợp khác: Trong nội dung phát sinh, thành phần ‘use’ được thay thế bằng thành phần ‘g’, khi đó tất cả các thuộc tính của thành phần ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:ref’ được chuyển vào thành phần ‘g’ được phát sinh. Một phép biến đổi tịnh tiến translate(x,y) được thêm vào cuối của thuộc tính ‘transform’ trong thành phần ‘g’ được phát sinh, với x và y nhận giá trị của thuôc tính ‘x’ và ‘y’ trong thành phần ‘use’. Đối tượng được tham chiếu và nội dung của nó được nhân bản vào cây phát sinh. 65
  7. Chương 3. Cấu trúc định dạng tập tin SVG Đối với các tác nhân người dùng hỗ trợ định kiểu bằng trang định kiểu CSS, thành phần ‘g’ được phát sinh sẽ mang giá trị thuộc tính ‘cascaded’ (được xếp tầng) của thành phần ‘use’ có được từ trang định kiểu phân tầng CSS. Hơn thế nữa, nhân bản của nguồn tài nguyên được tham chiếu mang trong nó giá trị thuộc tính “cascaded” nhận về từ trang định kiểu phân tầng CSS trong thành phần được tham chiếu. Do đó, kết quả của các bộ chọn lọc CSS khi kết hợp với các thuộc tính ‘class’ và ‘style’ đựơc thay thế bằng các giá trị tương đương chức năng của thuộc tính ‘style’ trong nội dung phát sinh chuyển tải giá trị thuộc tính “cascaded”. Ví dụ 1: Sau đây là ví dụ đơn giản dung hai thành phần ‘use’ và ‘rect’: Example Use01 - Simple case of 'use' on a 'rect' 66
  8. Chương 3. Cấu trúc định dạng tập tin SVG Cây tài liệu của ví dụ này: svg svg defs defs rect rect use g rect Cây tài liệu ban đầu Cây tài liệu của nội dung phát sinh Hình 3.5. Cây tài liệu của thành phần ‘use’ chỉ dùng ‘g’ Kết quả trên trình duyệt sẽ là. Hình 3.6 Minh họa thành phần ‘use’ chỉ dùng ‘g’ Nội dung của tài liệu phát sinh: Example Use01-GeneratedContent - Simple case of 'use' on a 'rect' Ví dụ 2: Ví dụ sau dùng hai thành phần ‘use’ và ‘symbol’: 67
  9. Chương 3. Cấu trúc định dạng tập tin SVG Example Use02 - 'use' on a 'symbol' MySymbol - four rectangles in a grid Cây tài lại của ví dụ này là: Cây tài liệu ban đầu Cây tài liệu phát sinh svg svg defs symbol defs Rect symbol rect rect … g rect svg use rect … Hình 3.7 Cây tài liệu của thành phần ‘use’ dùng ‘g’ và ‘svg’ 68
  10. Chương 3. Cấu trúc định dạng tập tin SVG Kết quả trên trình duyệt: Hình 3.8 Minh họa thành phần ‘use’ dùng ‘g’ và ‘svg’ Nội dung tài liệu phát sinh: Example Use02-GeneratedContent - 'use' on a 'symbol' Ví dụ 3: Sau đây là đoạn tài liệu SVG chứng minh cách sử dụng thành phần ‘use’ với thuộc tính ‘transform’:
  11. Chương 3. Cấu trúc định dạng tập tin SVG xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> Example Use03 - 'use' with a 'transform' attribute Kết quả trên trình duyệt là: Hình 3.9. Minh họa thành phần ‘use’ với thuộc tính ‘transform’ Nội dung tài liệu phát sinh như sau: Example Use03-GeneratedContent - 'use' with a 'transform' attribute Ví dụ 4: Đoạn tài liệu SVG sau sử dụng thành phần ‘use’ với trang định kiểu phân tầng CSS. 70
  12. Chương 3. Cấu trúc định dạng tập tin SVG Example Use04 - 'use' with CSS styling path { shape-rendering: optimizeQuality } /* rule 8 */ g > path { visibility: hidden } ]]> Kết qủa trên trình duyệt là: Hình 3.10 Minh họa thành phần ‘use’ với trang định kiểu CSS Đoạn tài liệu phát sinh tương ứng như sau: 71
  13. Chương 3. Cấu trúc định dạng tập tin SVG Example Use04-GeneratedContent - 'use' with a 'transform' attribute Trong đoạn tài liệu trên có sử dụng một số quy tắc định kiểu áp dụng cho nội dung được phát sinh(các quy tắc từ 1-6 và 10-12), các nguyên tắc còn lại không được dùng (các quy tắc từ 7-9). • Quy tắc 7 và 8: Bộ chọn lọc định kiểu CSS chỉ áp dụng được trong cây tài liệu bình thường mà không áp dụng được cho cây tài liệu phát sinh, do đó hai bộ chọn lọc định kiểu (trong quy tắc 7 và 8 ) không được phát sinh trong cây tài liệu phát sinh. • Quy tắc 9: Cây tài liệu phát sinh chỉ thừa hưởng từ cha của thành phần ‘use’ mà không thừa hưởng các thuộc tính của cha của thành phần tham chiếu, do đó quy tắc này không ảnh hưởng đến kết quả tài liệu phát sinh. 72
  14. Chương 3. Cấu trúc định dạng tập tin SVG Trong đoạn tài liệu được phát sinh ở trên, các thuộc tính định kiểu được bộ chọn lọc tìm thấy được chuyển thành thuộc tính nội tuyến ‘style’của thành phần ‘g’ và ‘path’. Khi thành ‘use’ tham chiếu tới thành phần khác là ‘use’ hay nội dung của nó chứa một thành phần ‘use’, thì hướng tiếp cận nhân bản (sao ra một thành phần giống với thành phần được tham chiếu) ở trên sẽ lặp lại với các thành phần ‘use’ bắt gặp trong thành phần được tham chiếu. Tuy nhiên các thành phần không được trực tiếp hay trực tiếp tham chiếu tới thành phần tham chiếu chính tới mình, nếu không sẽ tạo ra lỗi lặp vô hạn. Một số thuộc tính của thành phần ‘use’: x= “” Hoành độ một góc của phạm vi hình chữ nhật mà các thành phần được tham chiếu hiển thị trong đó. y= “” Tung độ một góc của phạm vi hình chữ nhật mà thành phần được tham chiếu hiển thị trong đó. width = “” Độ lớn chiều ngang của phạm vi hình chữ nhật mà các thành phần được tham chiếu hiển thị trong đó. Giá trị âm sẽ gây ra lỗi, còn nếu nhận giá trị 0 thì không hiển thị thành phần này. height= “” Độ lớn chiều dọc của phạm vi hình chữ nhật mà các thành phần được tham chiếu hiển thị trong đó. Giá trị âm sẽ gây ra lỗi, còn nếu nhận giá trị 0 sẽ không hiển thị thành phần này. xlink:href= “” Là một tham chiếu tới một phân đoạn hay một thành phần khác trong tài liệu SVG. 73
  15. Chương 3. Cấu trúc định dạng tập tin SVG 3.10 Thành phần ‘image’: Thành phần ‘image’ (hình ảnh) xác định nội dung của một tập tin (hình ảnh) sẽ được hiển thị trong phạm vi hình chữ nhật được cho trong hệ trục tọa độ người dùng hiện tại. Thành phần ‘image’ có thể tham chiếu tới một tập tin ảnh quét như PNG hay JPEG hay một tập tin có loại MIME là “image/svg+xml” (là một tập tin SVG). Các bộ hiển thị SVG (SVG Viewer - chương trình để hiển thị nội dung tập tin SVG) cần phải hỗ trợ ít nhất các định dạng tập tin ảnh PNG, JPEG và SVG. Kết quả khi xử lý thành phần ‘image’ luôn cho một ảnh với bốn kênh màu RGBA (Red-Green-Blue-Alpha). Khi thành phần ‘image’ tham chiếu tới một ảnh quét PNG hay JPEG có ba kênh màu thì kết quả nhận được như là một ảnh với bốn kênh màu RGBA, trong đó kênh alpha (trong suốt) thiết lập giá trị 1 (không có độ trong suốt với nền). Đối với ảnh quét một kênh màu thì kết quả được cũng như một ảnh bốn kênh màu, trong trường hợp này kênh màu duy nhất được dùng để tính ba kênh màu còn lại với kênh alpha được thiết lập giá trị là 1. Thành phần ‘image’ thiết lập một khung nhìn mới cho tập tin được tham chiếu. Đường bao của khung nhìn được chỉ rõ bởi thuộc tính ‘x’, ‘y’, ‘width’ và ‘height’. Cách hiển thị và tỉ lệ co dãn của ảnh được tham chiếu được kiểm soát bởi thuộc tính ‘preserveAspectRatio’ (bảo toàn tỉ lệ cạnh của ảnh). Khi một thành phần ‘image’ tham chiếu tới một ảnh SVG thì thuộc tính ‘preserveAspectRatio’ cũng như thuộc tính xén (clip) và tràn (overflow) của thành phần gốc trong ảnh SVG được tham chiếu sẽ bị bỏ qua. Thay vào đó thuộc tính ‘preserveAspectRatio’ của thành phần ‘image’ đang tham chiếu sẽ định nghĩa cách thức nội dung ảnh SVG được hiển thị trong khung nhìn và các thuộc tính xén và tràn của thành phần ‘image’ sẽ định nghĩa cách thức nội dung ảnh SVG được xén theo hệ trục toạ độ của khung nhìn. Giá trị của thuộc tính ‘viewBox’ được dùng với thuộc tính ‘preserveAspectRatio’ thì được định nghĩa trong nội dung ảnh được tham chiếu. Đối với nội dung được tham chiếu có chỉ định một ‘viewBox’ (ví dụ, một tập tin SVG chứa thuộc tính ‘viewBox’ trong thành phần SVG ngoài cùng) thì giá trị 74
  16. Chương 3. Cấu trúc định dạng tập tin SVG ‘viewBox’ này sẽ được dùng. Đối với ảnh quét (PNG, JPEG) thì đường bao của ảnh sẽ được dùng như ‘viewBox’ có giá trị là “0 0 [chiều rộng ảnh] [chiều cao ảnh]”. Nếu nội dung được tham chiếu không có giá trị tương ứng với ‘viewBox’ (tập tin SVG không có ‘viewBox’) thì thuộc tính ‘preserveAspectRatio’ sẽ bị bỏ qua, và nội dung ảnh tham chiếu chỉ tịnh tiến một đoạn tương ứng với giá trị thuộc tính ‘x’ và ‘y’. Ví dụ, nếu ảnh được tham chiếu là PNG hay JPEG và thuộc tính preserveAspectRatio = “xMinYmin meet”, thì tỉ lệ cạnh của ảnh quét sẽ bảo toàn, ảnh quét sẽ được định kích thước lớn nhất có thể mà vẫn đảm bảo toàn bộ ảnh quét được hiển thị trong khung nhìn mà thành phần ‘image’ thiết lập. Góc trái trên của ảnh quét được canh thẳng với góc trái trên của khung nhìn được định nghĩa bởi các thuộc tính ‘x’, ‘y’, ‘width’, ‘heigth’ trong thành phần ‘image’ đang tham chiếu tới ảnh đó. Nếu thuộc tính preserveAspectRatio= ‘none’ thì tỉ lệ cạnh của ảnh không được bảo toàn. Khi đó ảnh sẽ co vừa khít trong khung nhìn, góc trái của ảnh trùng với góc trái của khung nhìn và góc dưới phải của ảnh trùng với góc dưới phải của khung nhìn (x+width , y+height). Nguồn tài nguyên được tham chiếu bởi thành phần ‘image’ sẽ cung cấp một tài liệu riêng. Tài liệu riêng này sẽ phát sinh cây phân tích riêng và mô hình đối tượng tài liệu riêng (nếu nguồn tài nguyên là một tập tin XML). Do đó không có sự kế thừa thuộc tính vào trong ảnh. Không giống với thành phần ‘use’, thành phần ‘image’ không thể tham chiếu đến các thành phần trong tập tin SVG. Các thuộc tính thường sử dụng của thành phần ‘image’: x= “” Toạ độ x góc trái trên của phạm vi hình chữ nhật sẽ chứa hình ảnh được tham chiếu. Giá trị mặc định là “0”. y= “” 75
  17. Chương 3. Cấu trúc định dạng tập tin SVG Toạ độ y góc trái trên của phạm vi hình chữ nhật sẽ chứa hình ảnh được tham chiếu. Giá trị mặc định là “0”. width= “” Số đo chiều ngang của phạm vi hình chữ nhật sẽ chứa hình ảnh được tham chiếu. Không nhận giá trị âm, nếu thiết lập giá trị âm sẽ gây ra lỗi. Nếu bằng 0 thì không hiển thị thành phần này. height= “” Số đo chiều dọc của phạm vi hình chữ nhật sẽ chứa hình ảnh được tham chiếu. Không nhận giá trị âm, nếu thiết lập giá trị âm sẽ gây ra lỗi. Nếu bằng 0 thì không hiển thị thành phần này. xlink:href= “” Tham chiếu URI tới nguồn tài nguyên hình ảnh. preserveAspectRatio= “none” hoặc “xMinYMin” hoặc …. Thiết lập các giá trị thích hợp để ảnh co dãn hiển thị như mong muốn. Ví dụ 1: Sau đây là ví dụ đơn giản sử dụng thành phần “image” tham chiếu tới một ảnh PNG. This graphic links to an external image My image 76
  18. Chương 3. Cấu trúc định dạng tập tin SVG 3.11 Các hình cơ bản 3.11.1 Hình chữ nhật – thành phần ‘rect’ Thành phần hình chữ nhật định nghĩa một hình chữ nhật với hệ trục toạ độ người dùng hiện thời. Để định nghĩa hình chữ nhật tròn góc thì ta thiết lập thuộc tính ‘rx’ và ‘ry’ trong thành phần ‘rect’. Một số thuộc tính thường dùng của thành phần ‘rect’: x= “” Toạ độ x góc trái trên của hình chữ nhật, giá trị mặc định là “0” y= “” Toạ độ y góc trái trên của hình chữ nhật, giá trị mặc định là “0” width= “” Độ lớn chiều ngang của hình chữ nhật, giá trị âm sẽ gây ra lỗi. Nếu nhận giá trị “0” thì sẽ không hiển thị thành phần này. height= “” Độ lớn chiều dọc của hình chữ nhật, giá trị âm sẽ gây ra lỗi. Nếu nhận giá trị “0” thì sẽ không hiển thị thành phần này. rx = “” Dành cho hình chữ nhật tròn góc, bán kính trục x của e-lip dùng làm tròn góc hình chữ nhật ry = “” Dành cho hình chữ nhật tròn góc, bán kính trục y của e-lip dùng làm tròn góc hình chữ nhật Ví dụ 1: Hình chữ nhật nhọn góc Example rect01 - rectangle with sharp 77
  19. Chương 3. Cấu trúc định dạng tập tin SVG corners Kết quả trên trình duyệt: Hình 3.11. Minh họa thành phần ‘rect’ vuông góc Ví dụ 2: Hình chữ nhật tròn góc Example rect02 - rounded rectangles Kết quả trên trình duyệt: Hình 3.12. Minh họa thành phần ‘rect’ tròn góc 78
  20. Chương 3. Cấu trúc định dạng tập tin SVG 3.11.2 Hình tròn – thành phần ‘circle’ Thành phần ‘circle’ định nghĩa một hình tròn dựa vào tâm và bán kính. Một số thuộc tính của thành phần ‘circle’: cx= “” Toạ độ x của tâm đường tròn. Mặc định là “0” cy= “” Toạ độ y của tâm đường tròn. Mặc định là “0” r= “” Bán kính của đường tròn. Giá trị âm sẽ gây ra lỗi. Nếu là “0” thì không hiển thị thành phần này. Ví dụ 1: Hình tròn viền xanh, bên trong màu đỏ Example circle01 - circle filled with red and stroked with blue Kết quả trên trình duyệt: Hình 3.13. Minh họa thành phần ‘circle’ 3.11.3 Hình e-lip – thành phần ‘ellipse’ Thành phần ‘ellipse’ định nghĩa một hình e-lip trong hệ trục tọa độ người dùng hiện tại dựa trên tâm và hai bán kính. 79
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
2=>2