Thành phần ‘defs’ là một thành phần vật chứa các thành phần được tham chiếu. Người ta khuyên nên định nghĩa các thành phần được tham chiếu bên trong thành phần ‘defs’ để dễ hiểu bất kỳ khi nào nếu cĩ thể.
Mơ hình nội dung của thành phần ‘defs’ tương tự của thành phần ‘g’. Do đĩ thành phần ‘g’ chứa được thành phần nào (là con của thành phần ‘g’ này) thì thành phần ‘defs’ cĩ thể chứa những thành phần đĩ và ngược lại.
Các thành phần con của ‘defs’ khơng được trực tiếp hiển thị; chúng khơng tham gia vào cây hiển thị. Như vậy thành phần ‘def’ chính là thành phần ‘g’ với thuộc tính ‘display’ được thiết lập là ‘none’. Tuy các thành phần con của ‘defs’ khơng tham gia vào cây trình diễn nhưng nĩ luơn cĩ mặt trong cây nguồn. Do đĩ các thành phần khác cĩ thể tham chiếu tới nĩ. Đồng thời giá trị thuộc tính ‘display’ của thành phần ‘defs’ hay bất kỳ thuộc tính nào của thành phần con
đều khơng ảnh hưởng tới việc một thành phần khác tham chiếu tới nĩ.
Ví dụ:
<?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="8cm" height="3cm"
xmlns="http://www.w3.org/2000/svg">
<desc>Local URI references within ancestor's 'defs' element.</desc>
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient>
</defs>
<rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#Gradient01)" />
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm"
fill="none" stroke="blue" stroke-width=".02cm" /> </svg>
59 Kết quả trên trình duyệt sẽ là:
Hình 3.3 Minh họa thành phần ‘defs’
Trong tài liệu trên, một thành phần linearGradient được định nghĩa trong thành phần ‘defs’ là con của thành phần ‘svg’, và là cha của thành phần ‘rect’ tham chiếu tới thành phần linearGradient.
Như vậy các thành phần tham chiếu được đặt trong thành ‘defs’ nhưng như
thế nào để dễ hiểu nhất ? Tốt nhất là đặt các thành phần được tham chiếu trong thành phần ‘defs’ là con trực tiếp của một trong số các thành phần cha của thành phần tham chiếu tới nĩ. Và ví dụ trên được xây dựng trên nguyên tắc này.
Hình sau minh họa cho ví dụ trên:
Hình 3.4. Cây DOM của nội dung SVG cho ví dụ hình chữ nhật tơ tuyến tính
3.7 Thành phần ‘desc’ và ‘title’:
Mỗi thành phần vật chứa hay thành phần đồ họa trong SVG cĩ thể cung cấp một chuỗi mơ tả bằng thành phần ‘desc’ hay ‘title’. Khi phân đoạn tài liệu SVG
… svg defs linearGradien rect …
60
hiện thời được hiển thị trên phương tiện trực quan thì các thành phần ‘desc’ và ‘title’ khơng được hiển thị. Tuy nhiên các tác nhân người dùng cĩ thể hiển thị thành phần ‘title’ dưới dạng tooltip (gợi ý) khi con trỏ di chuyển qua các thành phần đặc biệt nào đĩ. Một cách trình diễn thay thế khác cho cả hình ảnh và âm thanh cũng cĩ thể thực hiện, và lúc đĩ các thành phần ‘desc’ và ‘title’ được hiển thị cịn các thành phần ‘path’ thì lại khơng. Điều đĩ thực sự cĩ thể làm được nhờ vào một trang định kiểu khác. Các cấu trúc sâu (deep structure) và các thành phần tham chiếu ‘use’ đơi khi lại mong muốn người dùng khai thác các phần mơ tả này.
Sau đây là một ví dụ. Tác nhân người dùng SVG khơng hiển thị các thành phần ‘desc’ và’titile’ nhưng sẽ hiển thị phần nội dung cịn lại của thành phần ‘g’. (adsbygoogle = window.adsbygoogle || []).push({});
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g>
<title>
Company sales by region </title>
<desc>
This is a bar chart which shows company sales by region.
</desc>
<!-- Bar chart defined as vector data --> </g>
</svg>
Các thành phần ‘decs’ và ‘title’ cĩ thể chứa phần văn bản được đánh dấu theo các khơng gian tên khác. Sau đây là ví dụ:
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg">
<desc xmlns:mydoc="http://example.org/mydoc"> <mydoc:title>
This is an example SVG file </mydoc:title>
<mydoc:para>
The global description uses markup from the <mydoc:emph>
61 Mydoc </mydoc:emph> namespace. </mydoc:para> </desc> <g>
<!-- the picture goes here --> </g>
</svg>
Trong ví dụ trên thành phần ‘decs’ chứa văn bản được đánh dấu với khơng gian tên mydoc= “http://example.org/mydoc”. Các thành của khơng gian tên mydoc
được dùng là mydoc:title, para, và emph.
Khi tạo tập tin SVG , tác giả thường thêm một thành phần con ‘title’ vào thành phần ‘svg’ ngồi cùng của tài liệu SVG độc lập. Thành phần con ‘title’ của thành phần ‘svg’ được thêm vào nhằm mục đích mơ tả nội dung của phân đoạn SVG được cho. Vì người dùng thường tham khảo tài liệu ngồi ngữ cảnh nên tác giả cần cung cấp các mơ tả giàu ngữ cảnh cho tài liệu trong phần mơ tả này. Để đảm bảo khả
năng truy cập, các tác nhân người dùng thường chỉ cho phép thành phần con ‘title’ của thành phần ‘svg’ ngồi cùng cĩ giá trị với người dùng. Cơ chế này được thực hiện tùy thuộc vào tác nhân người dùng (chẳng hạn như chú thích hay là nĩi lên cho người dùng nghe).
Hiện tại các thành phần của SVG, cụ thể là thành phần vật chứa và thành phần văn bản, khơng đưa ra các giới hạn về số lượng các thành phần con ‘desc’ và ‘title’. Tính linh động này chỉ cĩ trong thời điểm hiện nay (7/2005). Trong tương lai sẽ cĩ một mơ hình nội dung phù hợp cho các thành phần vật chứa, bởi vì một số thành phần vật chứa trong SVG cho phép các nội dung đan xen nhau, và các quy tắc về
nội dung đan xen với XML khơng yêu cầu giới hạn. Trong các phiên bản tới của ngơn ngữ SVG, các quy tắc giới hạn nội dung đan xen sẽ được đưa ra. Người ta khuyên tốt nhất nên cĩ tối đa một thành phần ‘title’ và một thành phần ‘desc’ xuất hiện trong thành phần con của thành phần đặc biệt nào đĩ. Những thành phần này nên xuất hiện trước các thành phần con khác (cĩ thể ngoại trừ thành phần
62
‘metadata’) hay nội dung dữ liệu. Nếu các tác nhân người dùng cần thiết chọn giữa nhiều thành phần ‘desc’ và ‘title’ trong việc xử lý (ví dụ, chọn ra một chuỗi dùng làm tooltip), tác nhân người dùng sẽ chọn thành phần đầu tiên.
3.8 Thành phần ‘symbol’:
Thành phần ‘symbol’ (biểu tượng) được dùng để định nghĩa các đối tượng mẫu cĩ thểđược sử dụng bởi thành phần ‘use’. (adsbygoogle = window.adsbygoogle || []).push({});
Chúng ta sử dụng thành phần ‘symbol’ cho các đồ hoạ được dùng nhiều lần trong cùng một tài liệu sẽ tăng thêm tính cấu trúc và ngữ nghĩa cho tài liệu. Các tài liệu giàu cấu trúc sẽ làm tăng khả năng truy cập.
Các điểm khác nhau cơ bản giữa thành phần ‘symbol’ và ‘g’:
• Một thành phần ‘symbol’ bản thân nĩ khơng được hiển thị. Chỉ cĩ thể
hiện của nĩ (một tham chiếu tới thành phần ‘symbol’ bởi thành phần ‘use’) được hiển thị.
• Thành phần ‘symbol’ cĩ thuộc tính viewBox và preserveAspectRatio cho phép ‘symbol’ nằm vừa trong khung nhìn hình chữ nhật được định rõ bởi thành phần ‘use’ đang tham chiếu tới nĩ.
Các thành phần cùng họ với ‘symbol’ là ‘marker’ và ‘pattern’.
Thành phần ‘symbol’ khơng bao giờ được hiển thị trực tiếp, chúng chỉ được tham chiếu bởi thành phần ‘use’. Thuộc tính ‘display’ khơng được dùng cho thành phần ‘symbol’. Vì thế các thành phần ‘symbol’ sẽ khơng được trực tiếp hiển thị
thậm chí thuộc tính ‘display’ được thiết lập một giá trị khác ‘none’. Các thành phần ‘symbol’ luơn ở trạng thái sẵn sàng cho tham chiếu thậm chí khi thuộc tính ‘display’ của thành phần đĩ hay bất kỳ thành phần cha của nĩ được thiết lập là ‘none’.
3.9 Thành phần ‘use’:
Bất kỳ thành phần nào trong nội dung SVG như ‘svg’, ‘symbol’, ‘g’, thành phần đồ hoạ hay thành phần ‘use’ khác mà cĩ thể là thành phần mẫu đều cĩ thể
63
được dùng lại trong tài liệu SVG bằng thành phần ‘use’ (sử dụng). Thành phần ‘use’ tham chiếu đến thành phần khác và xác định nội dung đồ hoạđược chứa vẽ tại vị trí được cấp trong tài liệu này.
Khơng giống thành phần ‘image’, thành phần ‘use’ khơng thể tham chiếu đến trọn vẹn một tập tin.
Thành phần ‘use’ cĩ các thuộc tính tuỳ chọn ‘x’, ‘y’, ‘width’ và ‘height’ dùng
để ánh xạ nội dung đồ hoạ của thành phần được tham chiếu lên một phạm vi hình chữ nhật theo hệ trục toạđộ hiện thời.
Kết quả khi dùng thành phần ‘use’ là: nội dung của thành phần được tham chiếu như thểđược nhân bản vào trong một cây DOM độc lập khơng hiện hữu mà cây này cĩ thành phần ‘use’ là cha của các thành phần được tham chiếu; cịn cha của thành phần ‘use’ là cha cấp cao hơn của chúng. Bởi vì cây DOM độc lập khơng hiện hữu nên mơ hình đối tượng tài liệu SVG (SVG DOM) chỉ chứa thành phần ‘use’ và thuộc tính của nĩ. SVG DOM khơng chỉ rõ các thành phần được tham chiếu là con của thành phần ‘use’.
Đối với các tác nhân người dùng hỗ trợđịnh kiểu với trang định kiểu CSS, thì việc nhân bản các thành phần được tham chiếu vào một cây DOM khơng cĩ thực cũng sao chép các giá trị thuộc tính nhận được từ CSS trên thành phần được tham chiếu và nội dung của nĩ.
Tuy nhiên sự kế thừa thuộc tính diễn ra như thể thành phần được tham chiếu
được chứa nguyên bản là thành phần con của thành phần ‘use’. Thành phần được tham chiếu thừa hưởng tất cả các thuộc tính từ thành phần ‘use’ và các thành phần cha của thành phần ‘use’. Một thể hiện của thành phần được tham chiếu khơng thừa hưởng các thuộc tính từ thành phần cha của thành phần được tham chiếu.
Nếu thuộc tính sự kiện được gắn cho thành phần được tham chiếu thì đối tượng nhận sự kiện (đích) sẽ là đối tượng SVGElementInstance (một thể hiện thành phần SVG) trong cây thể hiện tương ứng với thành phần được tham chiếu.
Việc quản lý sự kiện trong cây tài liệu khơng thực sự tồn tại hoạt động như thể
64
điều là các sự kiện được gửi tới các đối tượng thể hiện SVGElementinstance tương
ứng với đích và các thành phần đích hiện thời trong cây con được tham chiếu. Một sự kiện sẽ nhân lên qua các phần khơng thực sự cũng như thực sự hiện hữu của cây của cây tài liệu giống như cây tài liệu bình thường: đầu tiên sự kiện sẽ đi từ thành phần gốc (root) xuống thành phần ‘use’ và sau đĩ đi qua các thành phần của cây khơng thực sự tồn tại trong pha bắt sự kiện. Tiếp sau đĩ là pha đích tại đích của của sự kiện, sau đĩ đi dần lên từ cây khơng thực sự tồn tại đến thành phần ‘use’ và quay về cây bình thường tới thành phần gốc trong pha phát sự kiện lên.
Một thành phần và tất cả các đối tượng thể hiện SVGELementInstance tương
ứng dùng chung một danh sách lắng nghe sự kiện.Thuộc tính currentTarget (đích hiện tại) của sự kiện cĩ thểđược dùng để xác định đối tượng lắng nghe sự kiện nào
được triệu gọi.
Ứng xử của thuộc tính ‘visibility’ thỏa mơ hình thừa hưởng thuộc tính. Do đĩ khi chỉ định ‘visibility:hidden’ trong thành phần ‘use’ khơng đảm bảo rằng nội dung
được tham chiếu khơng được hiển thị. Nếu dùng thành phần ‘use’ chỉ định ‘visibility:hidden’ tham chiếu đến thành phần chỉ định ‘visibility:hiddden’ hay ‘visibility:inherit’ thì thành phần này sẽ bị ẩn đi. Tuy nhiên, nếu thành phần được tham chiếu chỉ định ‘visibility:visible’ thì thành phần đĩ sẽ hiển thị dù thành phần ‘use’ chỉ định là ‘visibility:hidden’.
Nếu thành phần được tham chiếu là ảnh động thì thể hiện của nĩ cũng là ảnh (adsbygoogle = window.adsbygoogle || []).push({});
động.
Một thành phần ‘use’ cĩ cùng kết quả hiển thị như thể nĩ được thay thể bởi nội dung được phát sinh:
• Nếu thành phần ‘use’ tham chiếu tới một thành phần ‘symbol’:
Trong nội dung được phát sinh, thành phần ‘use’ sẽ được thay thế bởi thành phần ‘g’, tất cả các thuộc tính của ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:href’ đều được chuyển sang thành phần ‘g’. Một phép biến đổi tịnh tuyến translate(x,y) được bổ sung vào cuối của thuộc tính ‘transform’ của thành phần ‘g’ được phát sinh, với x và y của phép biến đổi
65
trên là giá trị thuộc tính ‘x’ và ‘y’ của thành phần ‘use’. Thành phần ‘symbol’ được tham chiếu và nội dung của nĩ được nhân bản lên và đưa vào cây được phát sinh, với một ngoại lệ là thành phần ‘symbol’ được thay thế bằng một thành phần ‘svg’. Thành phần ‘svg’ được phát sinh này sẽ cĩ các giá trị thuộc tính rõ ràng ‘width’ và ‘height’. Nếu thuộc tính ‘width’ và/hoặc ‘height’ được cung cấp trong thành phần ‘use’, thì các thuộc tính này sẽ được chuyển vào thành phần ‘svg’ đựơc phát sinh. Nếu thuộc tính ‘width’ và/hoặc ‘height’ khơng được chỉ định thì thành phần ‘svg’ được phát sinh sẽ dùng giá trị “100%” cho những thuộc tính này.
• Nếu thành phần ‘use’ tham chiếu tới thành phần ‘svg’:
Trong nội dung phát sinh, thành phần ‘use’ sẽ được thay thế bằng thành phần ‘g’, khi đĩ tất cả các thuộc tính của thành phần ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:href’ đều được chuyển sang thành phần ‘g’. Một phép biến đổi tịnh tuyến translate(x,y) được bổ sung vào cuối của thuộc tính ‘transform’ của thành phần ‘g’ được phát sinh, với x và y của phép biến đổi trên là giá trị thuộc tính ‘x’ và ‘y’ của thành phần ‘use’. Thành phần ‘svg’ được tham chiếu và nội dung của nĩ được nhân bản vào cây được phát sinh. Nếu thuộc tính ‘width’ và/hoặc ‘height’ được cung cấp trong thành phần ‘use’, thì các giá trị này sẽ đè (override) lên các thuộc tính tương ứng của thành phần ‘svg’ trong cây phát sinh.
• Những trường hợp khác:
Trong nội dung phát sinh, thành phần ‘use’ được thay thế bằng thành phần ‘g’, khi đĩ tất cả các thuộc tính của thành phần ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:ref’ được chuyển vào thành phần ‘g’ được phát sinh. Một phép biến đổi tịnh tiến translate(x,y) được thêm vào cuối của thuộc tính ‘transform’ trong thành phần ‘g’ được phát sinh, với x và y nhận giá trị của thuơc tính ‘x’ và ‘y’ trong thành phần ‘use’. Đối tượng được tham chiếu và nội dung của nĩ được nhân bản vào cây phát sinh.
66
Đối với các tác nhân người dùng hỗ trợ định kiểu bằng trang định kiểu CSS, thành phần ‘g’ được phát sinh sẽ mang giá trị thuộc tính ‘cascaded’ (được xếp tầng) của thành phần ‘use’ cĩ được từ trang định kiểu phân tầng CSS. Hơn thế nữa, nhân bản của nguồn tài nguyên được tham chiếu mang trong nĩ giá trị thuộc tính “cascaded” nhận về từ trang định kiểu phân tầng CSS trong thành phần được tham chiếu. Do đĩ, kết quả của các bộ chọn lọc CSS khi kết hợp với các thuộc tính ‘class’ và ‘style’ đựơc thay thế bằng các giá trị tương đương chức năng của thuộc tính ‘style’ trong nội dung phát sinh chuyển tải giá trị thuộc tính “cascaded”.
Ví dụ 1: Sau đây là ví dụđơn giản dung hai thành phần ‘use’ và ‘rect’: <?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="3cm" viewBox="0 0 100 30" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
<defs>
<rect id="MyRect" width="60" height="10"/> </defs>
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" /> <use x="20" y="10" xlink:href="#MyRect" />
67 Cây tài liệu của ví dụ này:
Hình 3.5. Cây tài liệu của thành phần ‘use’ chỉ dùng ‘g’
Kết quả trên trình duyệt sẽ là.
Hình 3.6 Minh họa thành phần ‘use’ chỉ dùng ‘g’ Nội dung của tài liệu phát sinh:
<?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="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use01-GeneratedContent - Simple case of 'use' on a 'rect'</desc>
<!-- 'defs' section left out --> (adsbygoogle = window.adsbygoogle || []).push({});
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" /> <!-- Start of generated content. Replaces 'use' -->