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 weitere Attribute enspricht cx=cy=fx=fy="0.5 -->
15: <radialGradient id="radgra1">
16: <stop offset="0%" style="stop-color: #FFF"/>
17: <stop offset="60%" style="stop-color: #FF9"/>
18: <stop offset="100%" style="stop-color: #F00"/>
19: </radialGradient>
20:
21: <!-- mit cx und cy -->
22: <radialGradient id="radgra2" cx="0.6" cy="0.7">
23: <stop offset="0%" style="stop-color: #FFF"/>
24: <stop offset="60%" style="stop-color: #FF9"/>
25: <stop offset="100%" style="stop-color: #F00"/>
26: </radialGradient>
27:
28: <!-- mit fx und fy -->
29: <radialGradient id="radgra3" fx="0.8" fy="0.9">
30: <stop offset="0%" style="stop-color: #FFF"/>
31: <stop offset="60%" style="stop-color: #FF9"/>
32: <stop offset="100%" style="stop-color: #F00"/>
33: </radialGradient>
34:
35: <!-- mit cx, cy, fx und fy -->
36: <radialGradient id="radgra4" cx="0.1" cy="0.2" fx="0.8" fy="0.9">
37: <stop offset="0%" style="stop-color: #FFF"/>
38: <stop offset="60%" style="stop-color: #FF9"/>
39: <stop offset="100%" style="stop-color: #F00"/>
40: </radialGradient>
41:
42: <!-- wie radgra4, mit Transformation -->
43: <radialGradient id="radgra5" cx="0.1" cy="0.2" fx="0.8" fy="0.9"
44: gradientTransform="skewX(45)">
45: <stop offset="0%" style="stop-color: #FFF"/>
46: <stop offset="60%" style="stop-color: #FF9"/>
47: <stop offset="100%" style="stop-color: #F00"/>
48: </radialGradient>
49:
50: <!-- wie radgra4, mit Transformation -->
51: <radialGradient id="radgra6" cx="0.1" cy="0.2" fx="0.8" fy="0.9"
52: gradientTransform="skewY(60) rotate(-45)">
53: <stop offset="0%" style="stop-color: #FFF"/>
54: <stop offset="60%" style="stop-color: #FF9"/>
55: <stop offset="100%" style="stop-color: #F00"/>
56: </radialGradient>
57:
58: </defs>
59:
60: <title>SVG - Learning by Coding</title>
61: <desc>SVG-Spezifikation in Beispielen</desc>
62: <text x="20" y="30" style="fill: #000; font-size: 24px">
63: Elemente radialGradient | stop</text>
64:
65: <circle cx="100" cy="100" r="50" style="fill: url(#radgra1)"/>
66: <circle cx="250" cy="100" r="50" style="fill: url(#radgra2)"/>
67: <circle cx="100" cy="250" r="50" style="fill: url(#radgra3)"/>
68: <circle cx="250" cy="250" r="50" style="fill: url(#radgra4)"/>
69: <circle cx="100" cy="400" r="50" style="fill: url(#radgra5)"/>
70: <circle cx="250" cy="400" r="50" style="fill: url(#radgra6)"/>
71:
72: </svg>
[zum Anfang]
