-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
195 lines (171 loc) · 5.71 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
---
title: <metadata>
slug: Web/SVG/Element/metadata
page-type: svg-element
browser-compat: svg.elements.metadata
---
{{SVGRef}}
The **`<metadata>`** [SVG](/en-US/docs/Web/SVG) element adds metadata to SVG content. Metadata is structured information about data. The contents of `<metadata>` should be elements from other {{Glossary("XML")}} {{Glossary("namespace", "namespaces")}} such as {{Glossary("RDF")}}, [FOAF](<https://en.wikipedia.org/wiki/FOAF_(ontology)>), etc.
## Usage context
{{svginfo}}
## DOM Interface
This element implements the {{domxref("SVGMetadataElement")}} interface.
## Example
```html
<svg
width="400"
viewBox="0 0 400 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<metadata>
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-RDF#">
<rdf:Description about="#CableA">
<connect:ends rdf:resource="#socket1" />
<connect:ends rdf:resource="#ComputerA" />
</rdf:Description>
<rdf:Description about="#CableB">
<connect:ends rdf:resource="#socket2" />
<connect:ends rdf:resource="#ComputerB" />
</rdf:Description>
<rdf:Description about="#CableN">
<connect:ends rdf:resource="#socket5" />
<connect:ends>Everything</connect:ends>
</rdf:Description>
<rdf:Description about="#Hub">
<connect:ends rdf:resource="#socket1" />
<connect:ends rdf:resource="#socket2" />
<connect:ends rdf:resource="#socket3" />
<connect:ends rdf:resource="#socket4" />
<connect:ends rdf:resource="#socket5" />
</rdf:Description>
</rdf:RDF>
</metadata>
<title>Network</title>
<desc>An example of a computer network based on a hub.</desc>
<style>
svg {
/* Default styles to be inherited */
fill: white;
stroke: black;
}
text {
fill: black;
stroke: none;
}
path {
fill: none;
}
</style>
<!-- Define symbols used in the SVG -->
<defs>
<!-- hubPlug symbol. Used by hub symbol -->
<symbol id="hubPlug">
<desc>A 10BaseT/100baseTX socket</desc>
<path d="M0,10 h5 v-9 h12 v9 h5 v16 h-22 z" />
</symbol>
<!-- hub symbol -->
<symbol id="hub">
<desc>A typical 10BaseT/100BaseTX network hub</desc>
<text x="0" y="15">Hub</text>
<g transform="translate(0 20)">
<rect width="253" height="84" />
<rect width="229" height="44" x="12" y="10" />
<circle fill="red" cx="227" cy="71" r="7" />
<!-- five groups each using the defined socket -->
<g id="sock1et" transform="translate(25 20)">
<title>Socket 1</title>
<use href="#hubPlug" />
</g>
<g id="socket2" transform="translate(70 20)">
<title>Socket 2</title>
<use href="#hubPlug" />
</g>
<g id="socket3" transform="translate(115 20)">
<title>Socket 3</title>
<use href="#hubPlug" />
</g>
<g id="socket4" transform="translate(160 20)">
<title>Socket 4</title>
<use href="#hubPlug" />
</g>
<g id="socket5" transform="translate(205 20)">
<title>Socket 5</title>
<use href="#hubPlug" />
</g>
</g>
</symbol>
<!-- computer symbol -->
<symbol id="computer">
<desc>A common desktop PC</desc>
<g id="monitorStand" transform="translate(40 121)">
<title>Monitor stand</title>
<desc>
One of those cool swivelling monitor stands that sit under the monitor
</desc>
<path d="m0,0 S 10 10 40 12" />
<path d="m80,0 S 70 10 40 12" />
<path d="m0,20 L 10 10 S 40 12 70 10 L 80 20z" />
</g>
<g id="monitor">
<title>Monitor</title>
<desc>A very fancy monitor</desc>
<rect width="160" height="120" />
<rect fill="lightgrey" width="138" height="95" x="11" y="12" />
</g>
<g id="processor" transform="translate(0 142)">
<title>The computer</title>
<desc>A desktop computer - broad flat box style</desc>
<rect width="160" height="60" />
<g id="discDrive" transform="translate(70 8)">
<title>disc drive</title>
<desc>A built-in disc drive</desc>
<rect width="58" height="3" x="12" y="8" />
<rect width="8" height="2" x="12" y="15" />
</g>
<circle cx="135" cy="40" r="5" />
</g>
</symbol>
</defs>
<text x="0" y="15">Network</text>
<!-- Use the hub symbol. -->
<g id="Hub" transform="translate(80 45)">
<title>Hub</title>
<use href="#hub" transform="scale(0.75)" />
</g>
<!-- Use the computer symbol. -->
<g id="ComputerA" transform="translate(20 170)">
<title>Computer A</title>
<use href="#computer" transform="scale(0.5)" />
</g>
<!-- Use the same computer symbol. -->
<g id="ComputerB" transform="translate(300 170)">
<title>Computer B</title>
<use href="#computer" transform="scale(0.5)" />
</g>
<!-- Draw Cable A. -->
<g id="CableA" transform="translate(107 88)">
<title>Cable A</title>
<desc>10BaseT twisted pair cable</desc>
<path d="M0,0c100,140 50,140 -8,160" />
</g>
<!-- Draw Cable B. -->
<g id="CableB" transform="translate(142 88)">
<title>Cable B</title>
<desc>10BaseT twisted pair cable</desc>
<path d="M0,0c100,180 110,160 159,160" />
</g>
<!-- Draw Cable N. -->
<g id="CableN" transform="translate(242 88)">
<title>Cable N</title>
<desc>10BaseT twisted pair cable</desc>
<path d="M0,0c0,-70 20,-50 60,-50" />
</g>
</svg>
```
{{ EmbedLiveSample('Example', '100%', 300) }}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}