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 - 6

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

Thêm vào BST
Báo xấu
90
lượt xem 10
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 là nó thiết lập một hệ trục toạ độ mới cho tất cả các thuộc tính khác và cho các thành phần con của thành phần chứa tính ‘viewBox’. 3.12.7 Thuộc tính ‘preserveAspectRatio’ Trong một số trường hợp, khi sử dụng thuộc tính ‘viewBox’, người ta muốn các hình hiển thị trải rộng toàn khung nhìn không cần đảm bảo tỉ lệ cạnh của hình (hình hiển thị trong khung nhinh có khi bị kéo dài hay thu hẹp theo một trục toạ độ). Trong một số trường hợp khác thì lại...

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 - 6

  1. Chương 3. Cấu trúc định dạng tập tin SVG là nó thiết lập một hệ trục toạ độ mới cho tất cả các thuộc tính khác và cho các thành phần con của thành phần chứa tính ‘viewBox’. 3.12.7 Thuộc tính ‘preserveAspectRatio’ Trong một số trường hợp, khi sử dụng thuộc tính ‘viewBox’, người ta muốn các hình hiển thị trải rộng toàn khung nhìn không cần đảm bảo tỉ lệ cạnh của hình (hình hiển thị trong khung nhinh có khi bị kéo dài hay thu hẹp theo một trục toạ độ). Trong một số trường hợp khác thì lại muốn các cạnh co dãn với cùng tỉ lệ để đảm bảo tỉ lệ cạnh của hình (hình mới đồng dạng với hình nguyên thủy). Thuộc tính ‘preserveAspectRatio= “[defer][]”, chỉ áp dụng trong các thành phần thiết lập khung nhìn mới, thành phần ‘marker’, ‘pattern’, ‘view’, dùng để chỉ định có cần co dãn tỉ lệ các chiều đồng nhất hay không. Thuộc tính ‘preserveAspectRatio’ chỉ dùng khi thuộc tính ‘viewBox’ được thiết lập, ngược lại thuộc tính này bị bỏ qua. Đối với thành phần ‘image’, thuộc tính ‘preserveAspectRatio’ trên thành phần ‘image’ xác định có cần bảo toàn tỉ lệ cạnh của ảnh được tham chiếu khi hiển thị hay không. Nếu giá trị của thuộc tính ‘preserveAspectRatio’ trên thành phần ‘image’ bắt đầu với giá trị ‘defer’ thì giá trị của thuộc ‘preserveAspectRatio’ (nếu có) trong nội dung được tham chiếu sẽ được dùng . Nếu nội dung được tham chiếu không có giá trị thuộc tính ‘preserveAspectRatio’ thì thuộc tính ‘preserveAspectRatio’ trên thành phần ‘image’ sẽ được xử lý bình thường – bỏ qua giá trị ‘defer’. Đối với các thành phần khác thành phần ‘image’ thì giá trị ‘defer’ trên thuộc tính ‘preserveAspectRatio’ sẽ bị bỏ qua. Tham số (canh lề) xác định có cần đảm bảo tỉ lệ các chiều hay không, nếu nó thuộc tính được thiết lập thì phương thức canh lề được dùng khi tỉ lệ cạnh trong thuộc tính ‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn. Tham số phải là một trong các giá trị sau: 100
  2. Chương 3. Cấu trúc định dạng tập tin SVG • none – không cần bảo toàn tỉ lệ cạnh. Nếu nhận giá trị ‘none’ thì tuỳ chọn sẽ bị bỏ qua. • xMinYMin - Cần bảo toàn tỉ lệ cạnh. o Giá trị của ‘viewBox’ canh trùng với giá trị X nhỏ nhất của khung nhìn. o Giá trị của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất của khung nhìn. • xMidYMin-Cần bảo toàn tỉ lệ cạnh o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X điểm giữa của khung nhìn. o Giá trị của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất của khung nhìn. • xMaxYMin-Cần bảo toàn tỉ lệ cạnh o Giá trị + của ‘viewBox’ canh trùng với giá trị X lớn nhất của khung nhìn. o Giá trị của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất của khung nhìn. • xMinYMid-Cần bảo toàn tỉ lệ cạnh o Giá trị của ‘viewBox’ canh trùng với giá trị X nhỏ nhất của khung nhìn. o Giá trị Y điểm giữa của ‘viewBox’ canh trùng với giá trị Y điểm giữa của khung nhìn. • xMidYMid-Cần bảo toàn tỉ lệ cạnh o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X điểm giữa của khung nhìn. 101
  3. Chương 3. Cấu trúc định dạng tập tin SVG o Giá trị Y điểm giữa của ‘viewBox’ canh trùng với giá trị Y điểm giữa của khung nhìn. • xMaxYMid - Cần bảo toàn tỉ lệ cạnh. o Giá trị của ‘viewBox’ canh trùng với giá trị X lớn nhất của khung nhìn. o Giá trị Y của điểm giữa của ‘viewBox’ canh trùng với giá trị Y của điểm giữa của khung nhìn. • xMinYMax - Cần bảo toàn tỉ lệ cạnh. o Giá trị của ‘viewBox’ canh trùng với giá trị X nhỏ nhất của khung nhìn. o Giá trị + của ‘viewBox’ canh trùng với giá trị Y lớn nhất của khung nhìn. • xMidYMax - Cần bảo toàn tỉ lệ cạnh. o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X của điểm giữa của khung nhìn. o Giá trị + của ‘viewBox’ canh trùng với giá trị Y lớn nhất của khung nhìn. • xMaxYMax - Cần bảo toàn tỉ lệ cạnh. o Giá trị + của ‘viewBox’ canh trùng với giá trị X lớn nhất của khung nhìn. o Giá trị + của ‘viewBox’ canh trùng với giá trị Y lớn nhất của khung nhìn. Tham số là tham số tuỳ chọn, nếu được cung cấp, nó sẽ được tách biệt với giá trị bởi một hay nhiều khoảng trắng. 102
  4. Chương 3. Cấu trúc định dạng tập tin SVG • meet (mặc định) : o Bảo toàn tỉ lệ cạnh o Toàn bộ ‘viewBox’ hiển thị trong khung nhìn o ‘viewBox’ được dãn to hết mức có thể trong khi vẫn đảm bảo các ràng buộc khác. Trong trường hợp này, nếu tỉ lệ cạnh của ảnh không khớp với khung nhìn, thì khung nhìn lớn hơn ‘viewBox’. • slice: o Bảo toàn tỉ lệ cạnh o ‘viewBox’ sẽ chiếm toàn bộ khung nhìn o ‘viewBox’ được co lại nhỏ nhất có thể, trong khi vẫn đảm bảo các ràng buộc khác Trong trường hợp này, nếu tỉ lệ cạnh của ‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn thì một phần của ‘viewBox’ không hiển thị trong khung nhìn. Ví dụ 1: Ví dụ sau chứng minh các tùy chọn đối với thuộc tính ‘preserveAspectRatio’.
  5. Chương 3. Cấu trúc định dạng tập tin SVG height='29' fill='none' stroke='blue'/>"> ]> Example PreserveAspectRatio - illustrates preserveAspectRatio attribute SVG to fit &Smile; Viewport 1 &Viewport1; Viewport 2 &Viewport2; --------------- meet ----------- ---- xMin*&Viewport1; &Smile; xMid*&Viewport1; &Smile; xMax*&Viewport1; &Smile; ---------- meet ---------- *YMin&Viewport2; &Smile; *YMid&Viewport2;
  6. Chương 3. Cấu trúc định dạng tập tin SVG width="30" height="60">&Smile; *YMax&Viewport2; &Smile; ---------- slice ---------- xMin*&Viewport2; &Smile; xMid*&Viewport2; &Smile; xMax*&Viewport2; &Smile; --------------- slice ---------- ----- *YMin&Viewport1; &Smile; *YMid&Viewport1; &Smile; *YMax&Viewport1; &Smile; 105
  7. 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.24 Minh họa thuộc tính ‘preserveAspectRatio’ 3.12.8 Thiết lập khung nhìn Tại bất kỳ điểm nào trong hình vẽ SVG, chúng ta có thể thiết lập một khung nhìn mới cho tất cả các thành phần chứa trong nó bằng cách thêm một thành phần ‘svg’ vào nội dung SVG. Bằng cách thiết lập một khung nhìn mới, chúng ta thiết lập một hệ trục toạ độ khung nhìn mới, một hệ trục toạ độ người dùng mới, và cũng có thể thêm vào một đường xén mới. Đường bao của khung nhìn mới được định nghĩa bởi thuộc tính ‘x’, ‘y’, ‘width’ và ‘height’ trong thành phần thiết lập khung nhìn mới, thành phần ‘svg’ chẳng hạn. Cả hai hệ trục toạ độ khung nhìn mới và hệ trục toạ độ người dùng có cùng gốc toạ độ tại (x,y), x và y tương ứng với các giá trị được thiết lập trong thành phần thiết lập khung nhìn mới. Hướng của hệ trục toạ độ khung nhìn mới và hệ trục toạ độ người dùng mới tương ứng với hướng của hệ trục toạ độ người dùng hiện tại đối với thành phần thiết lập khung nhìn mới này. Mỗi đơn vị trong hệ trục toạ độ 106
  8. Chương 3. Cấu trúc định dạng tập tin SVG khung nhìn mới và hệ trục toạ độ người dùng mới cùng giá trị với đơn vị trong khung nhìn hiện tại đối với thành phần thiết lập khung nhìn mới này. Ví dụ 1: This SVG drawing embeds another one, thus establishing a new viewport Các thành phần có thể thiết lập khung nhìn mới: • Thành phần ‘svg’. • Thành phần ‘symbol’ định nghĩa một khung nhìn mới bất kỳ khi nào được dùng cụ thể bởi thành phần ‘use’. • Thành phần ‘image’ tham chiếu tới một tập tin SVG sẽ thiết lập một khung nhìn tạm thời vì trong nguồn tài nguyên được tham chiếu có một thành phần ‘svg’. • Thành phần ‘foreignObject’ (thành phần này không được mô tả trong phạm vi tìm hiểu) tạo một khung nhìn mới để hiển thị nội dung trong thành phần này. Nếu khung nhìn mới thiết lập một đường xén mới thì sẽ được xác định bởi giá trị ‘overflow’ của thành phần thiết lập khung nhìn mới này. Nếu một đường xén được tạo tương ứng với khung nhìn mới, hình dạng của đường xén được xác định bởi giá trị của thuộc tính ‘clip’. 107
  9. Chương 3. Cấu trúc định dạng tập tin SVG 3.13 Định kiểu (styling) 3.13.1 Các thuộc tính định kiểu của SVG SVG dùng thuộc tính định kiểu (styling properties) để mô tả cách thức các thành phần đồ họa trong nội dung SVG được xây dựng. SVG dùng các thuộc tính định kiểu sau: • Tất cả các thuộc tính định nghĩa cách thức một đối tượng được vẽ như màu tô, màu viền, độ rộng đường, nét vẽ…. • Các thuộc tính định kiểu văn bản, ‘font-family’ và ‘font-size’ …. • Các tham số buộc các thành phần phải được xậy dựng theo giá trị của nó, như đường xén, mặt nạ, hiệu ứng lọc…. SVG dùng các thuộc tính định kiểu đặc trưng của nó và của CSS và XSL. Trong phạm vi đề tài, chỉ có cách định kiểu bằng thuộc tính trình diễn và CSS được xét đến, còn XSL không được đề cập đến. 3.13.2 Định kiểu dùng thuộc tính trình diễn Các thuộc tính trình diễn như ‘fill’, ‘stroke’, ‘clip-path’… được dùng trong các thành phần cho trước để chỉ định cách thức các thành phần này được xây dựng. Ví dụ 1: Ví dụ sau minh hoạ cách dùng thuộc tính ‘fill’ và ‘stroke’ cho thành phần hình chữ nhật (‘rect’). Hình chữ nhật sẽ được tô màu đỏ và viền xanh. 108
  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.25 Minh họa thuộc tính ‘fill’ 3.13.3 Định kiểu bằng CSS SVG hỗ trợ định kiểu bằng trang định CSS như sau: • Trang định kiểu CSS ngoài được liên kết vào tài liệu hiện tại • Trang định kiểu CSS nội được nhúng trong tài liệu hiện tại, trong thành phần ‘style’ của SVG. • Định kiểu nội tuyến, khai báo thuộc tính CSS trong thuộc tính ‘style’ của một thành phần SVG đặc biệt. Ví dụ 1: Ví dụ sau minh hoạ cách sử dụng trang định kiểu CSS ngoại để thiết lập thuộc tính ‘fill’ và ‘stroke’ trên tất cả các hình chữ nhật trong tài liệu SVG. Trang định kiểu ngoại (mystyle.css): rect { fill: red; stroke: blue; stroke-width: 3 } 109
  11. Chương 3. Cấu trúc định dạng tập tin SVG Tài liệu SVG tham chiếu tới trang định kiểu ngoài mystyle.css Kết quả trên trình duyệt là hai hình chữ nhật màu đỏ viền xanh: Hình 3.26 Minh họa nội dung SVG có tham chiếu đến trang định kiểu CSS Ví dụ 2: Trang định kiểu CSS được nhúng trong nội dung SVG trong một thành phần ‘style’. Ví dụ minh hoạ cách dùng trang định kiểu CSS sau có kết quả như ví dụ 1 trên.
  12. Chương 3. Cấu trúc định dạng tập tin SVG xmlns="http://www.w3.org/2000/svg" version="1.1"> Chú ý trang định kiểu được đặt trong cấu trúc CDATA (). Đặt trang định kiểu CSS trong khối CDATA đôi khi cần thiết vì trang định kiểu CSS có thể các chứa kí tự , ví dụ ‘>’, xung đột với bộ phân tích SVG. Thậm chí nếu trang định kiểu không dùng các kí tự xung đột với bộ phân tích XML thì W3C khuyên vẫn nên đặt trang đinh kiểu trong khối CDATA. SVG hỗ trợ định kiểu CSS nội tuyến. Tương tự như thuộc tính ‘style’ trong HTML (ngôn ngữ đánh dấu siêu văn bản), định kiểu CSS nội tuyến được khai báo trong thuộc tính ‘style’ trong SVG bằng cách chỉ định một danh sách các phần tử cách nhau bởi dấu phẩy (‘,’), mỗi phần tử là một khai báo thuộc tính dạng “tên thuộc tính : giá trị”. Ví dụ 3: Ví dụ sau minh họa cách định kiểu cho hình chữ nhật bằng thuộc tính ‘style’. Kết quả nhận được là một hình chữ nhật màu đỏ viền xanh. Chú ý là tên thuộc tính và giá trị của thuộc tính trong SVG phân biệt hoa thường. Do đó khai báo thuộc tính ‘FILL’ thay vì ‘fill’ sẽ dẫn đến kết quả không như mong muốn. 111
  13. Chương 3. Cấu trúc định dạng tập tin SVG 3.13.4 Thành phần ‘style’ Thành phần ‘style’ cho phép trang định kiểu được nhúng trực tiếp vào nội dung SVG. Thành phần ‘style’ có cùng thuộc tính như trong HTML. 3.13.5 Thuộc tính ‘class’ class = Thuộc tính này chỉ định một tên lớp hay tập các tên lớp cho một thành phần. Nhiều thành phần có thể được chỉ định cùng một tên lớp. Nếu dùng nhiều tên lớp thì phải phân cách nhau bởi một hay nhiều khoảng trắng. Thuộc tính ‘class’ chỉ định một hay nhiều tên lớp cho một thành phần. Thành phần có thể được coi là thuộc về các lớp này. Một tên lớp có thể được dùng chung bởi nhiều thể hiện của thành phần. Thuộc tính ‘class’ có các vai trò sau: • Là một bộ chọn lọc trang định kiểu (khi người dùng muốn gán thông tin định kiểu cho một tập các thành phần). • Dùng cho xử lý mục đích chung của các tác nhân người dùng. Ví dụ 1: Trong ví dụ sau, thành phần ‘text’ được dùng kết hợp với thuộc tính ‘class’ để định kiểu cho thông điệp. Variable declared twice Undeclared variable Bad syntax for variable name Trong một tác nhân người dùng hỗ trợ định kiểu CSS, quy tắc định kiểu CSS sẽ báo cho tác nhân người dùng phải hiển thị thông điệp ‘thông tin’ màu xanh, thông điệp ‘cảnh báo’ màu vàng, và thông điệp ‘cảnh báo’ màu đỏ. text.info { color: green } 112
  14. Chương 3. Cấu trúc định dạng tập tin SVG text.warning { color: yellow } text.error { color: red } 3.13.6 Phạm vi của trang định kiểu: • Tài liệu SVG độc lập: Chỉ có một cây phân tích. Các trang định kiểu định nghĩa bất kỳ nơi đâu trong tài liệu SVG (chẳng hạn, trong thành phần ‘style’, hoặc trong thuộc tính ‘style’, hoặc trong trang định kiểu bên ngoài được tham chiếu) sẽ được áp dụng xuyên suốt toàn bộ tài liệu SVG. • Tài liệu SVG độc lập được nhúng trong một tài liệu HTML hay XML bằng thành phần ‘img’, ‘object’ (HTML) hay ‘image’ (SVG) Sẽ có hai cây phân tích riêng biệt; một cho tài liệu tham chiếu (có thể là HTML hay XHTML), và một cho tài liệu SVG. Các trang định kiểu được định nghĩa trong tài liệu tham chiếu sẽ được áp dụng xuyên suốt tài liệu tham chiếu nhưng không ảnh hưởng đến tài liệu SVG được tham chiếu. Các trang định kiểu trong tài liệu SVG được tham chiếu sẽ được áp dụng xuyên suốt toàn tài liệu SVG nhưng không ảnh hưởng tới tài liệu tham chiếu (tức HTML, XHTML). Để một trang định kiểu được dùng chung cho cả hai tài liệu [X]HTML và tài liệu SVG thì cần liên kết chúng tới cùng một trang định kiểu. • Nội dung SVG độc lập được nhúng nguyên bản vào một tài liệu XML Chỉ có một cây phân tích dùng nhiều không gian tên. Cây này có một hay nhiều cây con trong không gian tên SVG. Các trang định kiểu được định nghĩa trong tài liệu XML sẽ được áp dụng cho toàn bộ tài liệu, bao gồm cả những phần trong không gian tên SVG. Để có trang định kiểu khác cho phần SVG, ta nên dùng thuộc tính định kiểu ‘style’, hoặc đặt một ID cho thành phần ‘SVG’ rồi dùng bộ chọn lọc trang định kiểu CSS, hoặc bộ chọn lọc XSL. 113
  15. Chương 3. Cấu trúc định dạng tập tin SVG 3.14 Đường xén 3.14.1 Giới thiệu: Đường xén (clipping path) giới hạn khu vực vẽ. Ở mức khái niệm, bất kỳ phần nào nằm ngoài vùng bao của đường xén đang được kích hoạt sẽ không được vẽ. Một đường xén có thể được hiểu là như một mặt nạ có các điểm ảnh bên ngoài đường xén là màu đen với giá trị trong suốt là “0” và các điểm ảnh bên trong đường xén là màu trắng với giá trị trong suốt là “1”. 3.14.2 Đường xén ban đầu Khi một thành phần ‘svg’ là thành phần gốc trong tài liệu hay được nhúng trong một tài liệu mà cách bố trí của nó (tài liệu chứa) được xác định tùy vào các quy tắc bố trí của CSS hay XSL, thì tác nhân người dùng phải thiết lập một đường xén ban đầu cho phân đoạn tài liệu SVG. Thuộc tính ‘overflow’ và thuộc tính ‘clip’ cùng với quy tắc xử lý của tác nhân người dùng sẽ hỗ trợ xác định đường xén ban đầu mà tác nhân người dùng thiết lập cho phân đoạn tài liệu SVG. 3.14.3 Thuộc tính ‘overflow’ và ‘clip’ Thuộc tính ‘overflow’ nhận một trong các giá trị “visible”, “hidden”, “scroll”, “auto”, “inherit”. Thuộc tính này được dùng cho các thành phần thiết lập khung nhìn mới, thành phần ‘pattern’, và thành phần ‘marker’. Thuộc tính này không được kế thừa. Cần lưu ý các điểm sau đối với thuộc tính ‘overflow’: • Thuộc tính ‘overflow’ áp dụng cho các thành phần thiết lập khung nhìn mới (ví dụ, thành phần ‘svg’), thành phần ‘pattern’ và thành phần 114
  16. Chương 3. Cấu trúc định dạng tập tin SVG ‘marker’. Các thành phần khác không chịu ảnh hưởng từ thuộc tính này (nghĩa là một hình chữ nhật xén không được tạo). • Đối với các thành phần có thể áp dụng thuộc tính ‘overflow’, nếu thuộc tính ‘overflow’ có giá trị “hidden” hoặc “scroll”, kết quả là đường xén hình dạng hình chữ nhật được tạo ra. Kết quả này tương đương với việc định nghĩa một thành phần ‘clipPath’ có nội dung là một thành phần ‘rect’; sau đó thành phần ‘clipPath’ này được thành phần cho sẵn (thành phần tạo khung nhìn) tham chiếu tới bằng thuộc tính ‘clipPath’ thông qua . • Nếu thuộc tính ‘overflow’ có giá trị khác ‘hidden’ hoặc ‘scroll’ thì thuộc tính này không ảnh hưởng gì cả (đường xén hình chữ nhật không đươc tạo). • Trong nội dung SVG, giá trị ‘auto’ bằng với “visible”. • Khi thành phần ‘svg’ ngoài cùng được nhúng nội tuyến trong một văn phạm XML cha dùng trang định kiểu phân lớp CSS hoặc trang định dạng XSL: nếu thuộc tính ‘overflow’ có giá trị ‘hidden’ hay ‘scroll’, thì tác nhân người dùng sẽ thiết lập một đường xén bằng với đường bao của khung nhìn ban đầu. Ngược lại, đường xén sẽ được thiết lập tùy vào quy tắc xén được định nghĩa trong trang định kiểu phân lớp. • Khi thành phần ‘svg’ ngoài cùng là một tài liệu độc lập hay được nhúng nội tuyến trong văn phạm XML cha không dùng trang định kiểu phân lớp CSS hay trang định dạng XSL, thì thuộc tính ‘overflow’ trên thành phần ‘svg’ ngoài cùng bị bỏ qua. Lý do của việc này là mục đích hiển thị. Đường xén ban đầu được thiết lập tương ứng với đường bao của khung nhìn ban đầu. • Giá trị khởi tạo của thuộc tính ‘overflow’ là “visible”. Tuy nhiên, trang định kiểu tác nhân người dùng sẽ nạp đè giá trị này, đồng thời thiết lập 115
  17. Chương 3. Cấu trúc định dạng tập tin SVG giá trị ‘overflow’ của thành phần thiết lập khung nhìn mới (ví dụ, thuộc tính ‘svg’), thành phần ‘pattern’ và thành phần ‘marker’. Giá trị được thíết lập là ‘hidden’. Như kết quả ở trên, ứng xử mặc định của tác nhân người dùng SVG là thiết lập một đường xén ứng với đường bao của khung nhìn ban đầu và thiết lập một đường xén mới cho mỗi thành phần thiết lập khung nhìn mới và mỗi thành phần ‘pattern’ và ‘marker’. Thuộc tính clip: clip = |auto|inherit Thuộc tính ‘clip’ có cùng giá trị tham số như được định nghĩa trong [CSS2- clip]. Giá trị không có đơn vị kèm theo sẽ được tính theo đơn vị của hệ trục toạ độ hiện tại. Giá trị “auto” định nghĩa một đường xén trùng với đường bao của khung nhìn được tạo bởi thành phần cho sẵn. 3.14.4 Đường xén đối với khung nhìn và đường xén đối với ‘viewBox’ Chú ý rằng giá trị khởi tạo của thuộc tính ‘overflow’, ‘clip’ và trang định kiểu tác nhân người dùng sẽ ảnh hưởng tới kết quả khởi tạo đường xén ban đầu. Đường xén này được thiết lập cho đường bao của khung nhìn ban đầu. Khi thuộc tính ‘viewBox’ và ‘preserveAspectRatio’ được chỉ định, đôi khi người ta yêu cầu thiết lập đường xén cho đường bao của ‘viewBox’ thay cho khung nhìn (hoặc hình chữ nhật tham chiếu trong trường hợp của thành phần ‘marker’ và ‘pattern’), đặc biệt là khi thuộc tính ‘preserveAspectRatio’ chỉ định đồng nhất tỉ lệ và tỉ lệ cạnh của ‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn. Để thiết lập đường xén ban đầu cho đường bao của ‘viewBox’, ta thiết lập đường bao của thuộc tính ‘clip’ trùng với hình chữ nhật được chỉ định trong thuộc tính ‘viewBox’. Chú ý là các tham số của thuộc tính ‘clip’ là , , , . Ngược lại, đối với thuộc tính ‘viewBox’ là , , , . 116
  18. Chương 3. Cấu trúc định dạng tập tin SVG 3.14.5 Thiết lập đường xén mới Một đường xén được định nghĩa bằng một thành phần ‘clipPath’. Một đường xén được dùng hoặc được tham chiếu bằng thuộc tính ‘clip-path’. Một thành phần ‘clipPath’ có thể chứa các thành phần ‘path’, ‘text’, các hình cơ sở (‘circle’) hoặc thành phần ‘use’. Nếu thành phần ‘use’ là con của thành phần ‘clipPath’, nó phải tham chiếu trực tiếp tới thành phần ‘path’, ‘text’, hay thành phần hình học cơ sở. Tham chiếu không trực tiếp sẽ gây ra lỗi. Hình không viền của mỗi thành phần con (bỏ qua các thuộc tính vẽ, như ‘fill’, ‘stroke’, ‘stroke-width’) của ‘clipPath’ sẽ định nghĩa ở mức khái niệm một mặt nạ 1-bit. Bất kỳ thành phần nào nằm ngoài đường viền sẽ bị che khuất. Khi thành phần ‘clipPath’ chứa nhiều thành phần con, một điểm được cho là nằm trong đường xén nếu nó nằm trong bất kỳ con nào của ‘clipPath’. Đối với thành phần đồ họa cho sẵn, đường xén thực sự được dùng là vùng giao nhau giữa các đường xén (được chỉ định bởi thuộc tính ‘clip-path’) với bất kỳ đường xén nào trong thành phần cha của nó (được chỉ định bởi thuộc tính ‘clip- path’ trong thành phần cha hoặc bởi thuộc tính ‘overflow’ trong thành phần cha thiết lập khung nhìn mới). Hai điểm cần lưu ý: • Bản thân thành phần ‘clipPath’ và thành phần con của nó không kế thừa đường xén từ thành phần tổ tiên của thành phần ‘clipPath’ này. • Thành phần ‘clipPath’ hay bất kỳ thành phần con của nó đều có thể chỉ định thuộc tính ‘clipPath’. Nếu một tham chiếu ‘clipPath’ hợp lệ được đặt trong thành phần ‘clipPath’, thì đường xén nhận được là phần giao của các nội dung của thành phần ‘clipPath’ với các đường xén được tham chiếu. Nếu tham chiếu ‘clipPath’ hợp lệ được đặt trong một thành phần con của thành phần ‘clipPath’, thì thành phần con cho sẵn sẽ được xén bởi 117
  19. Chương 3. Cấu trúc định dạng tập tin SVG đường xén được tham chiếu đó trước khi hội (OR) các hình chiếu của thành phần con này với các hình chiếu của thành phần con khác. Một số thuộc tính của thành phần ‘clipPath’: clipPathUnits = “userSpaceOnUse | objectBoudingBox” Định nghĩa hệ trục toạ độ cho nội dung của thành phần ‘clipPath’. Nếu clipPathUnits = “userSpaceOnUse” thì nội dung của thành phần ‘clipPath’ sẽ cung cấp giá trị theo hệ trục toạ độ hiện tại, nơi mà thành phần ‘clipPath’ được tham chiếu (nghĩa là hệ trục toạ độ của thành phần tham chiếu tới thành phần ‘clipPath’ thông qua thuộc tính ‘clip- path’). Nếu clipPathUnits = “objectBoundingBox” thì hệ trục toạ độ của nội dung của thành phần ‘clipPath’ sẽ được thiết lập bằng cách dùng đường bao (bounding box) của thành phần sử dung đường xén này. Nếu thuộc tính ‘clipPathUnits’ không được chỉ định, thì giá trị mặc định là “userSpaceOnUse”. Thuộc tính kế thừa vào thành phần ‘clipPath’ từ thành phần cha của nó, thuộc tính không kế thừa từ thành phần tham chiếu thành tới phần ‘clipPath’. Thành phần ‘clipPath’ không bao giờ được hiển thị trực tiếp, cách sử dụng duy nhất của nó là xem nó là một cái gì đó có thể được tham chiếu bằng thuộc tính ‘clip- path’. Thuộc tính ‘display’ không áp dụng cho thành phần ‘clipPath’; do đó thành phần ‘clipPath’ không được hiển thị trực tiếp thậm chỉ thuộc tính ‘display’ được thiết lập khác “none”, và thành phần ‘clipPath’ sẵn sàng cho tham chiếu thậm chí khi thuộc tính ‘display’ trên thành phần ‘clipPath’ hay bất kỳ thành phần cha của nó được thiết lập thành “none”. 118
  20. Chương 3. Cấu trúc định dạng tập tin SVG clip-path = | none | inherit là một tham chiếu tới một đối tượng đồ hoạ khác trong cùng một phân đoạn tài liệu SVG mà sẽ được dùng như đường xén. Mặc định là ‘none’. clip-rule = nonzero | evenodd | inherit Thuộc tính ‘clip-rule’ chỉ áp dụng cho các thành phần đồ hoạ được chứa trong một thành phần ‘clipPath’. Phân đoạn sau sẽ áp dụng quy tắc xén evennodd (chẵn-lẽ) cho đường xén vì thuộc tính ‘clip-rule’ được chỉ định trên thành phần ‘path’. Thành phần ‘path’ này định nghĩa hình dạng đường xén. Ngược lại phân đoạn sau sẽ không dung quy tắc xén ‘evenodd’ cho đường xén vì thuộc tính ‘clip-rule’ được chỉ định trong thành phần tham chiếu, không phải trên đối tượng định nghĩa hình dạnh đường xén. Ví dụ 1: Vi dụ sau minh cách dùng đường xén bằng thành phần ‘clipPath’: 119
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