SVG – Learning by Coding
1:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3:
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
4:
<!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
5:
]>
6: 7:
<!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
8:
<!-- Author: Dr. Thomas Meinike 12/02 - thomas@handmadecode.de -->
9: 10:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11: 12:
<defs>
13: 14:
<!-- ohne Attribute x1,x2,y1,y2 -->
15:
<linearGradient id="lingra1">
16:
<stop offset="0%" style="stop-color: #000"/>
17:
<stop offset="50%" style="stop-color: #00F"/>
18:
<stop offset="100%" style="stop-color: #FFF"/>
19:
</linearGradient>
20: 21:
<!-- mit x1,x2,y1,y2 -->
22:
<linearGradient id="lingra2" x1="0" y1="0" x2="0.6" y2="0.6">
23:
<stop offset="0%" style="stop-color: #000"/>
24:
<stop offset="50%" style="stop-color: #00F"/>
25:
<stop offset="100%" style="stop-color: #FFF"/>
26:
</linearGradient>
27: 28:
<!-- mit x1,x2,y1,y2 -->
29:
<linearGradient id="lingra3" x1="0.2" y1="0.2" x2="1" y2="1">
30:
<stop offset="0%" style="stop-color: #000"/>
31:
<stop offset="50%" style="stop-color: #00F"/>
32:
<stop offset="100%" style="stop-color: #FFF"/>
33:
</linearGradient>
34: 35:
<!-- x1,y1 < 0, x2,y2 > 1 -->
36:
<linearGradient id="lingra4" x1="-0.5" y1="-0.5" x2="1.2" y2="1.2">
37:
<stop offset="0%" style="stop-color: #000"/>
38:
<stop offset="50%" style="stop-color: #00F"/>
39:
<stop offset="100%" style="stop-color: #FFF"/>
40:
</linearGradient>
41: 42:
<!-- wie lingra2, mit spreadMethod (Werte: pad,reflect,repeat) -->
43:
<linearGradient id="lingra5" x1="0" y1="0" x2="0.6" y2="0.6"
44:
spreadMethod="reflect">
45:
<stop offset="0%" style="stop-color: #000"/>
46:
<stop offset="50%" style="stop-color: #00F"/>
47:
<stop offset="100%" style="stop-color: #FFF"/>
48:
</linearGradient>
49: 50:
<!-- wie lingra1, mit zusaetzlicher Transformation -->
51:
<linearGradient id="lingra6" gradientTransform="rotate(90)">
52:
<stop offset="0%" style="stop-color: #000"/>
53:
<stop offset="50%" style="stop-color: #00F"/>
54:
<stop offset="100%" style="stop-color: #FFF"/>
55:
</linearGradient>
56: 57:
</defs>
58: 59:
<title>SVG - Learning by Coding</title>
60:
<desc>SVG-Spezifikation in Beispielen</desc>
61:
<text x="20" y="30" style="fill: #000; font-size: 24px">
62:
Elemente linearGradient | stop</text>
63: 64:
<rect x="20" y="60" width="400" height="40" style="fill: url(#lingra1)"/>
65:
<rect x="20" y="130" width="400" height="40" style="fill: url(#lingra2)"/>
66:
<rect x="20" y="200" width="400" height="40" style="fill: url(#lingra3)"/>
67:
<rect x="20" y="270" width="400" height="40" style="fill: url(#lingra4)"/>
68:
<rect x="20" y="340" width="400" height="40" style="fill: url(#lingra5)"/>
69:
<rect x="20" y="410" width="400" height="40" style="fill: url(#lingra6)"/>
70: 71:
</svg>
[zum Anfang]
