3.14 Đường xén
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 ngồ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
118
đườ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ĩ
119 clip-path = <uri> | none | inherit
<uri> 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. <g clip-rule="nonzero"> <clipPath id="MyClip"> <path d="..." clip-rule="evenodd" /> </clipPath> <rect clip-path="url(#MyClip)" ... /> </g>
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.
<g clip-rule="nonzero"> <clipPath id="MyClip"> <path d="..." /> </clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" ... /> </g>
Ví dụ 1:
120 <?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd "> <svg width="236" height="295"> <defs> <clipPath id="clipRecorte"> <path d="M0,0 L100,0 L100,100 L0,100 Z" /> </clipPath> </defs>
<image width="236" height="295" xlink:href="a.gif" opacity="0.3" />
<image width="236" height="295" xlink:href="a.png" clip-path="url(#clipRecorte)" />
<rect id="filtered" width="100" height="100"
style="fill: red; fill-opacity: 0; stroke: red; stroke-width: 1;
shape-rendering: optimizeSpeed;" />
</svg>
Kết quả trên trình duyệt: ảnh “a.png” bị làm mờ đi do thuộc tính ‘fill-opacity = 0.3’, ảnh “a.png” thứ hai chỉ hiển thị phần trong của đường xén hình chữ nhật
clipRecorte:
121