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ương Cấu trúc định dạng tập tin SVG thiết lập hệ trục toạ độ cho tất thuộc tính khác cho thành phần thành phần chứa tính ‘viewBox’ 3.12.7 Thuộc tính ‘preserveAspectRatio’ Trong số trường hợp, sử dụng thuộc tính ‘viewBox’, người ta muốn hình hiển thị trải rộng tồn khung nhìn khơng cần đảm bảo tỉ lệ cạnh hình (hình hiển thị khung nhinh có bị kéo dài hay thu hẹp theo trục toạ độ) Trong số trường hợp khác lại muốn cạnh co dãn với tỉ lệ để đảm bảo tỉ lệ cạnh hình (hình đồng dạng với hình ngun thủy) Thuộc tính ‘preserveAspectRatio= “[defer][]”, áp dụng thành phần thiết lập khung nhìn mới, thành phần ‘marker’, ‘pattern’, ‘view’, dùng để định có cần co dãn tỉ lệ chiều đồng hay khơng Thuộc tính ‘preserveAspectRatio’ dùng thuộc tính ‘viewBox’ thiết lập, ngược lại thuộc tính bị bỏ qua Đối với thành phần ‘image’, thuộc tính ‘preserveAspectRatio’ thành phần ‘image’ xác định có cần bảo toàn tỉ lệ cạnh ảnh tham chiếu hiển thị hay khơng Nếu giá trị thuộc tính ‘preserveAspectRatio’ thành phần ‘image’ bắt đầu với giá trị ‘defer’ giá trị thuộc ‘preserveAspectRatio’ (nếu có) nội dung tham chiếu dùng Nếu nội dung tham chiếu khơng có giá trị thuộc tính ‘preserveAspectRatio’ thuộc tính ‘preserveAspectRatio’ thành phần ‘image’ xử lý bình thường – bỏ qua giá trị ‘defer’ Đối với thành phần khác thành phần ‘image’ giá trị ‘defer’ thuộc tính ‘preserveAspectRatio’ bị bỏ qua Tham số (canh lề) xác định có cần đảm bảo tỉ lệ chiều hay khơng, thuộc tính thiết lập phương thức canh lề dùng tỉ lệ cạnh thuộc tính ‘viewBox’ khơng khớp với tỉ lệ cạnh khung nhìn Tham số phải giá trị sau: 100 Chương Cấu trúc định dạng tập tin SVG • none – khơng cần bảo tồn tỉ lệ cạnh Nếu nhận giá trị ‘none’ tuỳ chọn bị bỏ qua • xMinYMin - Cần bảo toàn tỉ lệ cạnh o Giá trị ‘viewBox’ canh trùng với giá trị X nhỏ khung nhìn o Giá trị ‘viewBox’ canh trùng với giá trị Y nhỏ khung nhìn • xMidYMin-Cần bảo toàn tỉ lệ cạnh o Giá trị X điểm ‘viewBox’ canh trùng với giá trị X điểm khung nhìn o Giá trị ‘viewBox’ canh trùng với giá trị Y nhỏ khung nhìn • xMaxYMin-Cần bảo tồn tỉ lệ cạnh o Giá trị + ‘viewBox’ canh trùng với giá trị X lớn khung nhìn o Giá trị ‘viewBox’ canh trùng với giá trị Y nhỏ khung nhìn • xMinYMid-Cần bảo tồn tỉ lệ cạnh o Giá trị ‘viewBox’ canh trùng với giá trị X nhỏ khung nhìn o Giá trị Y điểm ‘viewBox’ canh trùng với giá trị Y điểm khung nhìn • xMidYMid-Cần bảo toàn tỉ lệ cạnh o Giá trị X điểm ‘viewBox’ canh trùng với giá trị X điểm khung nhìn 101 Chương Cấu trúc định dạng tập tin SVG o Giá trị Y điểm ‘viewBox’ canh trùng với giá trị Y điểm khung nhìn • xMaxYMid - Cần bảo toàn tỉ lệ cạnh o Giá trị ‘viewBox’ canh trùng với giá trị X lớn khung nhìn o Giá trị Y điểm ‘viewBox’ canh trùng với giá trị Y điểm khung nhìn • xMinYMax - Cần bảo tồn tỉ lệ cạnh o Giá trị ‘viewBox’ canh trùng với giá trị X nhỏ khung nhìn o Giá trị + ‘viewBox’ canh trùng với giá trị Y lớn khung nhìn • xMidYMax - Cần bảo toàn tỉ lệ cạnh o Giá trị X điểm ‘viewBox’ canh trùng với giá trị X điểm khung nhìn o Giá trị + ‘viewBox’ canh trùng với giá trị Y lớn khung nhìn • xMaxYMax - Cần bảo toàn tỉ lệ cạnh o Giá trị + ‘viewBox’ canh trùng với giá trị X lớn khung nhìn o Giá trị + ‘viewBox’ canh trùng với giá trị Y lớn khung nhìn Tham số tham số tuỳ chọn, cung cấp, tách biệt với giá trị hay nhiều khoảng trắng 102 Chương 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 Tồn ‘viewBox’ hiển thị khung nhìn o ‘viewBox’ dãn to hết mức đảm bảo ràng buộc khác Trong trường hợp này, tỉ lệ cạnh ảnh không khớp với khung nhìn, khung nhìn lớn ‘viewBox’ • slice: o Bảo toàn tỉ lệ cạnh o ‘viewBox’ chiếm tồn khung nhìn o ‘viewBox’ co lại nhỏ có thể, đảm bảo ràng buộc khác Trong trường hợp này, tỉ lệ cạnh ‘viewBox’ không khớp với tỉ lệ cạnh khung nhìn phần ‘viewBox’ khơng hiển thị khung nhìn Ví dụ 1: Ví dụ sau chứng minh tùy chọn thuộc tính ‘preserveAspectRatio’ ]> 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; &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 Chương Cấu trúc định dạng tập tin SVG Kết 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 điểm hình vẽ SVG, thiết lập khung nhìn cho tất thành phần chứa cách thêm thành phần ‘svg’ vào nội dung SVG Bằng cách thiết lập khung nhìn mới, thiết lập hệ trục toạ độ khung nhìn mới, hệ trục toạ độ người dùng mới, thêm vào đường xén Đường bao khung nhìn định nghĩa thuộc tính ‘x’, ‘y’, ‘width’ ‘height’ 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 hệ trục toạ độ người dùng có gốc toạ độ (x,y), x y tương ứng với giá trị thiết lập thành phần thiết lập khung nhìn Hướng hệ trục toạ độ khung nhìn hệ trục toạ độ người dùng tương ứng với hướng hệ trục toạ độ người dùng thành phần thiết lập khung nhìn Mỗi đơn vị hệ trục toạ độ 106 Chương Cấu trúc định dạng tập tin SVG khung nhìn hệ trục toạ độ người dùng giá trị với đơn vị khung nhìn thành phần thiết lập khung nhìn Ví dụ 1: This SVG drawing embeds another one, thus establishing a new viewport Các thành phần thiết lập khung nhìn mới: • Thành phần ‘svg’ • Thành phần ‘symbol’ định nghĩa khung nhìn dùng cụ thể thành phần ‘use’ • Thành phần ‘image’ tham chiếu tới tập tin SVG thiết lập khung nhìn tạm thời nguồn tài nguyên tham chiếu có thành phần ‘svg’ • Thành phần ‘foreignObject’ (thành phần khơng mơ tả phạm vi tìm hiểu) tạo khung nhìn để hiển thị nội dung thành phần Nếu khung nhìn thiết lập đường xén xác định giá trị ‘overflow’ thành phần thiết lập khung nhìn Nếu đường xén tạo tương ứng với khung nhìn mới, hình dạng đường xén xác định giá trị thuộc tính ‘clip’ 107 Chương 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 SVG SVG dùng thuộc tính định kiểu (styling properties) để mơ tả cách thức thành phần đồ họa nội dung SVG xây dựng SVG dùng thuộc tính định kiểu sau: • Tất thuộc tính định nghĩa cách thức đối tượng vẽ 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’ ‘font-size’ … • Các tham số buộc thành phần phải xậy dựng theo giá trị nó, đường xén, mặt nạ, hiệu ứng lọc… SVG dùng thuộc tính định kiểu đặc trưng CSS XSL Trong phạm vi đề tài, có cách định kiểu thuộc tính trình diễn CSS xét đến, cịn XSL không đề 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 ‘fill’, ‘stroke’, ‘clip-path’… dùng thành phần cho trước để định cách thức thành phần xây dựng Ví dụ 1: Ví dụ sau minh hoạ cách dùng thuộc tính ‘fill’ ‘stroke’ cho thành phần hình chữ nhật (‘rect’) Hình chữ nhật tô màu đỏ viền xanh 108 Chương Cấu trúc định dạng tập tin SVG Kết trình duyệt: Hình 3.25 Minh họa thuộc tính ‘fill’ 3.13.3 Định kiểu CSS SVG hỗ trợ định kiểu trang định CSS sau: • Trang định kiểu CSS ngồi liên kết vào tài liệu • Trang định kiểu CSS nội nhúng tài liệu tại, thành phần ‘style’ SVG • Định kiểu nội tuyến, khai báo thuộc tính CSS thuộc tính ‘style’ 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’ ‘stroke’ tất hình chữ nhật tài liệu SVG Trang định kiểu ngoại (mystyle.css): rect { fill: red; stroke: blue; stroke-width: } 109 Chương 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 mystyle.css Kết trình duyệt 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 nhúng nội dung SVG thành phần ‘style’ Ví dụ minh hoạ cách dùng trang định kiểu CSS sau có kết ví dụ Chú ý trang định kiểu đặt cấu trúc CDATA () Đặt trang định kiểu CSS khối CDATA đơi cần thiết trang định kiểu CSS chứa kí tự , ví dụ ‘>’, xung đột với phân tích SVG Thậm chí trang định kiểu khơng dùng kí tự xung đột với phân tích XML W3C khun nên đặt trang đinh kiểu khối CDATA SVG hỗ trợ định kiểu CSS nội tuyến Tương tự thuộc tính ‘style’ HTML (ngơn ngữ đánh dấu siêu văn bản), định kiểu CSS nội tuyến khai báo thuộc tính ‘style’ SVG cách định danh sách phần tử cách dấu phẩy (‘,’), phần 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 thuộc tính ‘style’ Kết nhận hình chữ nhật màu đỏ viền xanh Chú ý tên thuộc tính giá trị thuộc tính SVG phân biệt hoa thường Do khai báo thuộc tính ‘FILL’ thay ‘fill’ dẫn đến kết không mong muốn 111 Chương 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 nhúng trực tiếp vào nội dung SVG Thành phần ‘style’ có thuộc tính HTML 3.13.5 Thuộc tính ‘class’ class = Thuộc tính định tên lớp hay tập tên lớp cho thành phần Nhiều thành phần định tên lớp Nếu dùng nhiều tên lớp phải phân cách hay nhiều khoảng trắng Thuộc tính ‘class’ định hay nhiều tên lớp cho thành phần Thành phần coi thuộc lớp Một tên lớp dùng chung nhiều thể thành phần Thuộc tính ‘class’ có vai trị sau: • Là chọn lọc trang định kiểu (khi người dùng muốn gán thông tin định kiểu cho tập thành phần) • Dùng cho xử lý mục đích chung tác nhân người dùng Ví dụ 1: Trong ví dụ sau, thành phần ‘text’ 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 tác nhân người dùng hỗ trợ định kiểu CSS, quy tắc định kiểu CSS 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, thông điệp ‘cảnh báo’ màu đỏ text.info { color: green } 112 Chương 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 trang định kiểu: • Tài liệu SVG độc lập: Chỉ có phân tích Các trang định kiểu định nghĩa nơi đâu tài liệu SVG (chẳng hạn, thành phần ‘style’, thuộc tính ‘style’, trang định kiểu bên tham chiếu) áp dụng xuyên suốt toàn tài liệu SVG • Tài liệu SVG độc lập nhúng tài liệu HTML hay XML thành phần ‘img’, ‘object’ (HTML) hay ‘image’ (SVG) Sẽ có hai phân tích riêng biệt; cho tài liệu tham chiếu (có thể HTML hay XHTML), cho tài liệu SVG Các trang định kiểu định nghĩa tài liệu tham chiếu áp dụng xuyên suốt tài liệu tham chiếu không ảnh hưởng đến tài liệu SVG tham chiếu Các trang định kiểu tài liệu SVG tham chiếu áp dụng xun suốt tồn tài liệu SVG khơng ảnh hưởng tới tài liệu tham chiếu (tức HTML, XHTML) Để trang định kiểu dùng chung cho hai tài liệu [X]HTML tài liệu SVG cần liên kết chúng tới trang định kiểu • Nội dung SVG độc lập nhúng nguyên vào tài liệu XML Chỉ có phân tích dùng nhiều khơng gian tên Cây có hay nhiều không gian tên SVG Các trang định kiểu định nghĩa tài liệu XML áp dụng cho toàn tài liệu, bao gồm phần 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’, đặt ID cho thành phần ‘SVG’ dùng chọn lọc trang định kiểu CSS, chọn lọc XSL 113 Chương 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, phần nằm vùng bao đường xén kích hoạt khơng vẽ Một đường xén hiểu mặt nạ có điểm ảnh bên đường xén màu đen với giá trị suốt “0” điểm ảnh bên đường xén màu trắng với giá trị suốt “1” 3.14.2 Đường xén ban đầu Khi thành phần ‘svg’ thành phần gốc tài liệu hay nhúng tài liệu mà cách bố trí (tài liệu chứa) xác định tùy vào quy tắc bố trí CSS hay XSL, tác nhân người dùng phải thiết lập đường xén ban đầu cho phân đoạn tài liệu SVG Thuộc tính ‘overflow’ thuộc tính ‘clip’ với quy tắc xử lý tác nhân người dùng 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’ ‘clip’ Thuộc tính ‘overflow’ nhận giá trị “visible”, “hidden”, “scroll”, “auto”, “inherit” Thuộc tính dùng cho thành phần thiết lập khung nhìn mới, thành phần ‘pattern’, thành phần ‘marker’ Thuộc tính không kế thừa Cần lưu ý điểm sau thuộc tính ‘overflow’: • Thuộc tính ‘overflow’ áp dụng cho thành phần thiết lập khung nhìn (ví dụ, thành phần ‘svg’), thành phần ‘pattern’ thành phần 114 Chương 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 (nghĩa hình chữ nhật xén khơng tạo) • Đối với thành phần áp dụng thuộc tính ‘overflow’, thuộc tính ‘overflow’ có giá trị “hidden” “scroll”, kết đường xén hình dạng hình chữ nhật tạo Kết tương đương với việc định nghĩa thành phần ‘clipPath’ có nội dung thành phần ‘rect’; sau thành phần ‘clipPath’ thành phần cho sẵn (thành phần tạo khung nhìn) tham chiếu tới thuộc tính ‘clipPath’ thơng qua • Nếu thuộc tính ‘overflow’ có giá trị khác ‘hidden’ ‘scroll’ thuộc tính khơng ảnh hưởng (đường xén hình chữ nhật khơng đươc tạo) • Trong nội dung SVG, giá trị ‘auto’ với “visible” • Khi thành phần ‘svg’ nhúng nội tuyến văn phạm XML cha dùng trang định kiểu phân lớp CSS trang định dạng XSL: thuộc tính ‘overflow’ có giá trị ‘hidden’ hay ‘scroll’, tác nhân người dùng thiết lập đường xén với đường bao khung nhìn ban đầu Ngược lại, đường xén thiết lập tùy vào quy tắc xén định nghĩa trang định kiểu phân lớp • Khi thành phần ‘svg’ tài liệu độc lập hay nhúng nội tuyến 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, thuộc tính ‘overflow’ thành phần ‘svg’ bị bỏ qua Lý việc mục đích hiển thị Đường xén ban đầu thiết lập tương ứng với đường bao khung nhìn ban đầu • Giá trị khởi tạo thuộc tính ‘overflow’ “visible” Tuy nhiên, trang định kiểu tác nhân người dùng nạp đè giá trị này, đồng thời thiết lập 115 Chương Cấu trúc định dạng tập tin SVG giá trị ‘overflow’ thành phần thiết lập khung nhìn (ví dụ, thuộc tính ‘svg’), thành phần ‘pattern’ thành phần ‘marker’ Giá trị thíết lập ‘hidden’ Như kết trên, ứng xử mặc định tác nhân người dùng SVG thiết lập đường xén ứng với đường bao khung nhìn ban đầu thiết lập đường xén cho thành phần thiết lập khung nhìn thành phần ‘pattern’ ‘marker’ Thuộc tính clip: clip = |auto|inherit Thuộc tính ‘clip’ có giá trị tham số định nghĩa [CSS2clip] Giá trị khơng có đơn vị kèm theo tính theo đơn vị hệ trục toạ độ Giá trị “auto” định nghĩa đường xén trùng với đường bao khung nhìn tạo thành phần cho sẵn 3.14.4 Đường xén khung nhìn đường xén ‘viewBox’ Chú ý giá trị khởi tạo thuộc tính ‘overflow’, ‘clip’ trang định kiểu tác nhân người dùng ảnh hưởng tới kết khởi tạo đường xén ban đầu Đường xén thiết lập cho đường bao khung nhìn ban đầu Khi thuộc tính ‘viewBox’ ‘preserveAspectRatio’ định, người ta yêu cầu thiết lập đường xén cho đường bao ‘viewBox’ thay cho khung nhìn (hoặc hình chữ nhật tham chiếu trường hợp thành phần ‘marker’ ‘pattern’), đặc biệt thuộc tính ‘preserveAspectRatio’ định đồng tỉ lệ tỉ lệ cạnh ‘viewBox’ không khớp với tỉ lệ cạnh khung nhìn Để thiết lập đường xén ban đầu cho đường bao ‘viewBox’, ta thiết lập đường bao thuộc tính ‘clip’ trùng với hình chữ nhật định thuộc tính ‘viewBox’ Chú ý tham số thuộc tính ‘clip’ , , , Ngược lại, thuộc tính ‘viewBox’ , , , 116 Chương Cấu trúc định dạng tập tin SVG 3.14.5 Thiết lập đường xén Một đường xén định nghĩa thành phần ‘clipPath’ Một đường xén dùng tham chiếu thuộc tính ‘clip-path’ Một thành phần ‘clipPath’ chứa thành phần ‘path’, ‘text’, hình sở (‘circle’) thành phần ‘use’ Nếu thành phần ‘use’ thành phần ‘clipPath’, 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 sở Tham chiếu không trực tiếp gây lỗi Hình khơng viền thành phần (bỏ qua thuộc tính vẽ, ‘fill’, ‘stroke’, ‘stroke-width’) ‘clipPath’ định nghĩa mức khái niệm mặt nạ 1-bit Bất kỳ thành phần nằm đường viền bị che khuất Khi thành phần ‘clipPath’ chứa nhiều thành phần con, điểm cho nằm đường xén nằm ‘clipPath’ Đối với thành phần đồ họa cho sẵn, đường xén thực dùng vùng giao đường xén (được định thuộc tính ‘clip-path’) với đường xén thành phần cha (được định thuộc tính ‘clippath’ thành phần cha thuộc tính ‘overflow’ 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’ thành phần khơng kế thừa đường xén từ thành phần tổ tiên thành phần ‘clipPath’ • Thành phần ‘clipPath’ hay thành phần định thuộc tính ‘clipPath’ Nếu tham chiếu ‘clipPath’ hợp lệ đặt thành phần ‘clipPath’, đường xén nhận phần giao nội dung thành phần ‘clipPath’ với đường xén tham chiếu Nếu tham chiếu ‘clipPath’ hợp lệ đặt thành phần thành phần ‘clipPath’, thành phần cho sẵn xén 117 Chương Cấu trúc định dạng tập tin SVG đường xén tham chiếu trước hội (OR) hình chiếu thành phần với hình chiếu thành phần khác Một số thuộc tính thành phần ‘clipPath’: clipPathUnits = “userSpaceOnUse | objectBoudingBox” Định nghĩa hệ trục toạ độ cho nội dung thành phần ‘clipPath’ Nếu clipPathUnits = “userSpaceOnUse” nội dung thành phần ‘clipPath’ cung cấp giá trị theo hệ trục toạ độ tại, nơi mà thành phần ‘clipPath’ tham chiếu (nghĩa hệ trục toạ độ thành phần tham chiếu tới thành phần ‘clipPath’ thơng qua thuộc tính ‘clippath’) Nếu clipPathUnits = “objectBoundingBox” hệ trục toạ độ nội dung thành phần ‘clipPath’ thiết lập cách dùng đường bao (bounding box) thành phần sử dung đường xén Nếu thuộc tính ‘clipPathUnits’ khơng định, giá trị mặc định “userSpaceOnUse” Thuộc tính kế thừa vào thành phần ‘clipPath’ từ thành phần cha 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 hiển thị trực tiếp, cách sử dụng xem tham chiếu thuộc tính ‘clippath’ Thuộc tính ‘display’ khơng áp dụng cho thành phần ‘clipPath’; thành phần ‘clipPath’ khơng hiển thị trực tiếp thuộc tính ‘display’ thiết lập khác “none”, thành phần ‘clipPath’ sẵn sàng cho tham chiếu chí thuộc tính ‘display’ thành phần ‘clipPath’ hay thành phần cha thiết lập thành “none” 118 Chương Cấu trúc định dạng tập tin SVG clip-path = | none | inherit tham chiếu tới đối tượng đồ hoạ khác phân đoạn tài liệu SVG mà dùng đường xén Mặc định ‘none’ clip-rule = nonzero | evenodd | inherit Thuộc tính ‘clip-rule’ áp dụng cho thành phần đồ hoạ chứa thành phần ‘clipPath’ Phân đoạn sau áp dụng quy tắc xén evennodd (chẵn-lẽ) cho đường xén thuộc tính ‘clip-rule’ định thành phần ‘path’ Thành phần ‘path’ định nghĩa hình dạng đường xén Ngược lại phân đoạn sau không dung quy tắc xén ‘evenodd’ cho đường xén thuộc tính ‘clip-rule’ định thành phần tham chiếu, đố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 thành phần ‘clipPath’: 119 ... height= "60 ">&Smile;< /svg> - slice *YMin&Viewport1;