|
1 <?xml version="1.0" encoding="UTF-8"?> |
|
2 <svg version="1.2" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 640 640"> |
|
3 <!-- added namespace declaration in above svg element, stelt, 2006 --> |
|
4 <defs> |
|
5 <radialGradient id="g1" gradientUnits="objectBoundingBox" |
|
6 cx="0" cy="0" r="1.5"> |
|
7 <stop offset="0" stop-color="#ffee00" /> |
|
8 <stop offset="1" stop-color="#f80" /> |
|
9 </radialGradient> |
|
10 <radialGradient id="g2" gradientUnits="objectBoundingBox" |
|
11 cx="0" cy="0" r="1.5"> |
|
12 <stop offset="0" stop-color="#0ef" /> |
|
13 <stop offset="1" stop-color="#08f" /> |
|
14 </radialGradient> |
|
15 |
|
16 <circle id="c" r="30" |
|
17 fill="url(#g1)" stroke="black" opacity="0.5" /> |
|
18 <rect id="d" width="55" height="45" |
|
19 fill="url(#g2)" stroke="black" opacity="0.5" /> |
|
20 <circle id="a" r="30" |
|
21 fill="url(#g1)" stroke="black" /> |
|
22 <rect id="b" width="55" height="45" |
|
23 fill="url(#g2)" stroke="black" /> |
|
24 </defs> |
|
25 |
|
26 <text x="260" y="50" font-family="verdana" font-size="20" fill="black">Opaque</text> |
|
27 |
|
28 <g transform="translate(0 40)"> |
|
29 |
|
30 <!-- clear --> |
|
31 <g transform="translate(20, 40)"> |
|
32 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
33 clear |
|
34 </text> |
|
35 <g enable-background="new"> |
|
36 <use x="30" y="40" xlink:href="#a" /> |
|
37 <use x="25" y="35" xlink:href="#b" comp-op="clear" /> |
|
38 </g> |
|
39 </g> |
|
40 |
|
41 <!-- src --> |
|
42 <g transform="translate(120, 40)"> |
|
43 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
44 src |
|
45 </text> |
|
46 <g enable-background="new"> |
|
47 <use x="30" y="40" xlink:href="#a" /> |
|
48 <use x="25" y="35" xlink:href="#b" comp-op="src" /> |
|
49 </g> |
|
50 </g> |
|
51 |
|
52 <!-- dest --> |
|
53 <g transform="translate(220, 40)"> |
|
54 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
55 dst |
|
56 </text> |
|
57 <g enable-background="new"> |
|
58 <use x="30" y="40" xlink:href="#a" /> |
|
59 <use x="25" y="35" xlink:href="#b" comp-op="dst" /> |
|
60 </g> |
|
61 </g> |
|
62 |
|
63 <!-- src-over --> |
|
64 <g transform="translate(320, 40)"> |
|
65 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
66 src-over |
|
67 </text> |
|
68 <g enable-background="new"> |
|
69 <use x="30" y="40" xlink:href="#a" /> |
|
70 <use x="25" y="35" xlink:href="#b" comp-op="src-over" /> |
|
71 </g> |
|
72 </g> |
|
73 |
|
74 <!-- dst-over --> |
|
75 <g transform="translate(420, 40)"> |
|
76 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
77 dst-over |
|
78 </text> |
|
79 <g enable-background="new"> |
|
80 <use x="30" y="40" xlink:href="#a" /> |
|
81 <use x="25" y="35" xlink:href="#b" comp-op="dst-over" /> |
|
82 </g> |
|
83 </g> |
|
84 |
|
85 <!-- src-in --> |
|
86 <g transform="translate(520, 40)"> |
|
87 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
88 src-in |
|
89 </text> |
|
90 <g enable-background="new"> |
|
91 <use x="30" y="40" xlink:href="#a" /> |
|
92 <use x="25" y="35" xlink:href="#b" comp-op="src-in" /> |
|
93 </g> |
|
94 </g> |
|
95 |
|
96 <!-- dst-in --> |
|
97 <g transform="translate(20, 160)"> |
|
98 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
99 dst-in |
|
100 </text> |
|
101 <g enable-background="new"> |
|
102 <use x="30" y="40" xlink:href="#a" /> |
|
103 <use x="25" y="35" xlink:href="#b" comp-op="dst-in" /> |
|
104 </g> |
|
105 </g> |
|
106 |
|
107 <!-- src-out --> |
|
108 <g transform="translate(120, 160)"> |
|
109 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
110 src-out |
|
111 </text> |
|
112 <g enable-background="new"> |
|
113 <use x="30" y="40" xlink:href="#a" /> |
|
114 <use x="25" y="35" xlink:href="#b" comp-op="src-out" /> |
|
115 </g> |
|
116 </g> |
|
117 |
|
118 <!-- dst-out --> |
|
119 <g transform="translate(220, 160)"> |
|
120 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
121 dst-out |
|
122 </text> |
|
123 <g enable-background="new"> |
|
124 <use x="30" y="40" xlink:href="#a" /> |
|
125 <use x="25" y="35" xlink:href="#b" comp-op="dst-out" /> |
|
126 </g> |
|
127 </g> |
|
128 |
|
129 <!-- src-atop --> |
|
130 <g transform="translate(320, 160)"> |
|
131 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
132 src-atop |
|
133 </text> |
|
134 <g enable-background="new"> |
|
135 <use x="30" y="40" xlink:href="#a" /> |
|
136 <use x="25" y="35" xlink:href="#b" comp-op="src-atop" /> |
|
137 </g> |
|
138 </g> |
|
139 |
|
140 <!-- dst-atop --> |
|
141 <g transform="translate(420, 160)"> |
|
142 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
143 dst-atop |
|
144 </text> |
|
145 <g enable-background="new"> |
|
146 <use x="30" y="40" xlink:href="#a" /> |
|
147 <use x="25" y="35" xlink:href="#b" comp-op="dst-atop" /> |
|
148 </g> |
|
149 </g> |
|
150 |
|
151 <!-- xor --> |
|
152 <g transform="translate(520, 160)"> |
|
153 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
154 xor |
|
155 </text> |
|
156 <g enable-background="new"> |
|
157 <use x="30" y="40" xlink:href="#a" /> |
|
158 <use x="25" y="35" xlink:href="#b" comp-op="xor" /> |
|
159 </g> |
|
160 </g> |
|
161 </g> |
|
162 |
|
163 <text x="220" y="320" font-family="verdana" font-size="20" fill="black">Partially Transparent</text> |
|
164 |
|
165 <g transform="translate(0 80)"> |
|
166 <!-- clear --> |
|
167 <g transform="translate(20, 280)"> |
|
168 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
169 clear |
|
170 </text> |
|
171 <g enable-background="new"> |
|
172 <use x="30" y="40" xlink:href="#c" /> |
|
173 <use x="25" y="35" xlink:href="#d" comp-op="clear" /> |
|
174 </g> |
|
175 </g> |
|
176 |
|
177 <!-- src --> |
|
178 <g transform="translate(120, 280)"> |
|
179 <text x="10" y="0" font-family="verdana" font-size="16" fill="black"> |
|
180 src |
|
181 </text> |
|
182 <g enable-background="new"> |
|
183 <use x="30" y="40" xlink:href="#c" /> |
|
184 <use x="25" y="35" xlink:href="#d" comp-op="src" /> |
|
185 </g> |
|
186 </g> |
|
187 |
|
188 <!-- dst --> |
|
189 <g transform="translate(220, 280)"> |
|
190 <text x="20" y="0" font-family="verdana" font-size="16" fill="black"> |
|
191 dst |
|
192 </text> |
|
193 <g enable-background="new"> |
|
194 <use x="30" y="40" xlink:href="#c" /> |
|
195 <use x="25" y="35" xlink:href="#d" comp-op="dst" /> |
|
196 </g> |
|
197 </g> |
|
198 |
|
199 <!-- src-over --> |
|
200 <g transform="translate(320, 280)"> |
|
201 <text x="10" y="0" font-family="verdana" font-size="16" fill="black"> |
|
202 src-over |
|
203 </text> |
|
204 <g enable-background="new"> |
|
205 <use x="30" y="40" xlink:href="#c" /> |
|
206 <use x="25" y="35" xlink:href="#d" comp-op="src-over" /> |
|
207 </g> |
|
208 </g> |
|
209 |
|
210 <!-- darken --> |
|
211 <g transform="translate(420, 280)"> |
|
212 <text x="10" y="0" font-family="verdana" font-size="16" fill="black"> |
|
213 dst-over |
|
214 </text> |
|
215 <g enable-background="new"> |
|
216 <use x="30" y="40" xlink:href="#c" /> |
|
217 <use x="25" y="35" xlink:href="#d" comp-op="dst-over" /> |
|
218 </g> |
|
219 </g> |
|
220 |
|
221 <!-- src-in --> |
|
222 <g transform="translate(520, 280)"> |
|
223 <text x="10" y="0" font-family="verdana" font-size="16" fill="black"> |
|
224 src-in |
|
225 </text> |
|
226 <g enable-background="new"> |
|
227 <use x="30" y="40" xlink:href="#c" /> |
|
228 <use x="25" y="35" xlink:href="#d" comp-op="src-in" /> |
|
229 </g> |
|
230 </g> |
|
231 |
|
232 <!-- dst-in --> |
|
233 <g transform="translate(20, 400)"> |
|
234 <text x="0" y="0" font-family="verdana" font-size="16" fill="black"> |
|
235 dst-in |
|
236 </text> |
|
237 <g enable-background="new"> |
|
238 <use x="30" y="40" xlink:href="#c" /> |
|
239 <use x="25" y="35" xlink:href="#d" comp-op="dst-in" /> |
|
240 </g> |
|
241 </g> |
|
242 |
|
243 <!-- src-out --> |
|
244 <g transform="translate(120, 400)"> |
|
245 <text x="0" y="0" font-family="verdana" font-size="16" fill="black"> |
|
246 src-out |
|
247 </text> |
|
248 <g enable-background="new"> |
|
249 <use x="30" y="40" xlink:href="#c" /> |
|
250 <use x="25" y="35" xlink:href="#d" comp-op="src-out" /> |
|
251 </g> |
|
252 </g> |
|
253 |
|
254 <!-- dst-out --> |
|
255 <g transform="translate(220, 400)"> |
|
256 <text x="0" y="0" font-family="verdana" font-size="16" fill="black"> |
|
257 dst-out |
|
258 </text> |
|
259 <g enable-background="new"> |
|
260 <use x="30" y="40" xlink:href="#c" /> |
|
261 <use x="25" y="35" xlink:href="#d" comp-op="dst-out" /> |
|
262 </g> |
|
263 </g> |
|
264 |
|
265 <!-- src-atop --> |
|
266 <g transform="translate(320, 400)"> |
|
267 <text x="0" y="0" font-family="verdana" font-size="16" fill="black"> |
|
268 src-atop |
|
269 </text> |
|
270 <g enable-background="new"> |
|
271 <use x="30" y="40" xlink:href="#c" /> |
|
272 <use x="25" y="35" xlink:href="#d" comp-op="src-atop" /> |
|
273 </g> |
|
274 </g> |
|
275 |
|
276 <!-- dst-atop --> |
|
277 <g transform="translate(420, 400)"> |
|
278 <text x="0" y="0" font-family="verdana" font-size="16" fill="black"> |
|
279 dst-atop |
|
280 </text> |
|
281 <g enable-background="new"> |
|
282 <use x="30" y="40" xlink:href="#c" /> |
|
283 <use x="25" y="35" xlink:href="#d" comp-op="dst-atop" /> |
|
284 </g> |
|
285 </g> |
|
286 |
|
287 <!-- xor --> |
|
288 <g transform="translate(520, 400)"> |
|
289 <text x="0" y="0" font-family="verdana" font-size="16" fill="black"> |
|
290 xor |
|
291 </text> |
|
292 <g enable-background="new"> |
|
293 <use x="30" y="40" xlink:href="#c" /> |
|
294 <use x="25" y="35" xlink:href="#d" comp-op="xor" /> |
|
295 </g> |
|
296 </g> |
|
297 </g> |
|
298 </svg> |
