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 của thành phần ‘clipPath’, thì thành phần con cho sẵn sẽ được xén bởi
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