SVG – Learning by Coding

[ color_currentColor.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 09/04 thomas@handmadecode.de     -->
 9: 
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11: 
12:   <title>SVG Learning By Coding</title>
13:   <desc>SVG-Spezifikation in Beispielen</desc>
14: 
15:   <defs>
16: 
17:     <linearGradient id="lingra" color="#FF0">
18:       <stop offset="0%" stop-color="#F00"/>
19:       <stop offset="50%" stop-color="currentColor"/>
20:       <stop offset="100%" stop-color="#00C"/>
21:     </linearGradient>
22: 
23:     <filter id="flood" color="#9F9" filterUnits="objectBoundingBox">
24:       <feFlood flood-color="currentColor" flood-opacity="0.8" result="floodout"/>
25:       <feComposite in="floodout" in2="SourceGraphic" operator="in"/>
26:     </filter>
27: 
28:     <filter id="spec" color="#FF0" filterUnits="userSpaceOnUse">
29:       <feSpecularLighting in="SourceGraphic" surfaceScale="2" specularConstant="3"
30:         specularExponent="40" lighting-color="currentColor">
31:         <fePointLight x="220" y="295" z="20"/>
32:       </feSpecularLighting>
33:     </filter>
34: 
35:   </defs>
36: 
37:   <text x="20" y="30" style="fill: #000; font-size: 24px">
38:     Eigenschaft color und Wert currentColor</text>
39:   <text x="20" y="50" style="fill: #000; font-size: 14px">
40:     verwendbar für fillstrokestop-colorflood-colorlighting-color</text>
41: 
42:   <g color="#F00">
43:     <rect x="20" y="80" width="100" height="50" fill="currentColor"/>
44:     <circle cx="160" cy="105" r="25" fill="#FFF" stroke="currentColor"/>
45:   </g>
46: 
47:   <g style="color: #00C">
48:     <rect x="20" y="180" width="100" height="50" style="fill: #FFC; stroke: currentColor"/>
49:     <circle cx="160" cy="205" r="25" style="fill: currentColor; stroke: #F00"/>
50:   </g>
51: 
52:   <g style="color: #FFF">
53:     <rect x="20" y="280" width="100" height="50" fill="url(#lingra)"/>
54:     <circle cx="160" cy="305" r="25" fill="currentColor" filter="url(#flood)"/>
55:     <circle cx="220" cy="305" r="25" fill="currentColor" filter="url(#spec)"/>
56:   </g>
57: 
58:   <line x1="250" y1="80" x2="250" y2="370" style="stroke: #CCC; stroke-width: 2px"/>
59:   <image xlink:href="bilder/color_currentColor.gif" x="310" y="80" width="222" height="254"/>
60:   <text x="20" y="365" style="fill: #00C; font-size: 12px">aktuelles Ergebnis</text>
61:   <text x="310" y="365" style="fill: #00C; font-size: 12px">erwartetes Ergebnis</text>
62: 
63: </svg>

[zum Anfang]