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]
