SVG – Learning by Coding

[ linearGradient.svg --> Grafik anzeigen ]

 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: <!--    AuthorDrThomas 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 0x2,y2 -->
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 lingra2mit spreadMethod (Wertepad,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 lingra1mit 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]