3.13 Định kiểu (styling)
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 ngồ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 }
110
Tài liệu SVG tham chiếu tới trang định kiểu ngồi mystyle.css <?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="5cm" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="10" y="10" width="300" height="300"/>
<rect x="320" y="10" width="400" height="300"/> </svg>
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.
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <defs> <style type="text/css"><![CDATA[ rect { fill: red; stroke: blue; stroke-width: 3 } ]]></style> </defs>
111
xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="10" y="10" width="300" height="300"/>
<rect x="320" y="10" width="400" height="300"/> </svg>
Chú ý trang định kiểu được đặt trong cấu trúc CDATA (<![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.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="5cm" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="200" y="100" width="600" height="300"
style="fill:red; stroke:blue; stroke-width:3"/> </svg>
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
112