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 02/03 - 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: <style type="text/css">
18: <![CDATA[
19:
20: *
21: {
22: font-family: sans-serif;
23: font-size: 12px;
24: }
25:
26: ]]>
27: </style>
28:
29: </defs>
30:
31: <text x="20" y="30" style="fill: #000; font-size: 24px">
32: Eigenschaften für Umrandungen</text>
33:
34: <!-- stroke: farbe; stroke-width: laenge (initial 1) -->
35: <rect x="30" y="60" width="150" height="80"
36: style="fill: none; stroke: #00C; stroke-width: 10px"/>
37: <text x="30" y="160">stroke: #00C</text>
38: <text x="30" y="175">stroke-width: 10px</text>
39:
40: <!-- stroke-linejoin: miter, round, bevel, inherit (initial miter) -->
41: <rect x="200" y="60" width="150" height="80"
42: style="fill: none; stroke: #00C; stroke-width: 10px; stroke-linejoin: round"/>
43: <text x="200" y="160">stroke-linejoin: round</text>
44:
45: <rect x="370" y="60" width="150" height="80"
46: style="fill: none; stroke: #00C; stroke-width: 10px; stroke-linejoin: bevel"/>
47: <text x="370" y="160">stroke-linejoin: bevel</text>
48:
49: <!-- stroke-dasharray: strich leer strich leer ... -->
50: <!-- ungerade Anzahl wird verdoppelt: 5,10,5 = 5,10,5,5,10,5 -->
51: <rect x="30" y="200" width="150" height="80"
52: style="fill: none; stroke: #00C; stroke-width: 2px; stroke-dasharray: 5,10"/>
53: <text x="30" y="300">stroke-width: 2px</text>
54: <text x="30" y="315">stroke-dasharray: 5,10</text>
55:
56: <!-- stroke-dashoffset: laenge (initial 0) -->
57: <rect x="200" y="200" width="150" height="80"
58: style="fill: none; stroke: #00C; stroke-width: 2px;
59: stroke-dasharray: 5,10,10; stroke-dashoffset: 50"/>
60: <text x="200" y="300">stroke-dasharray: 5,10,10</text>
61: <text x="200" y="315">stroke-dashoffset: 50</text>
62:
63: <!-- stroke-opacity: 0 bis 1 -->
64: <rect x="370" y="200" width="150" height="80"
65: style="fill: none; stroke: #00C; stroke-width: 2px; stroke-opacity: 0.3"/>
66: <text x="370" y="300">stroke-opacity: 0.3</text>
67:
68: <!-- hier nicht verwendet: -->
69: <text x="30" y="350">weitere Eigenschaften:</text>
70: <text x="30" y="370">
71: stroke-linecap: butt, round, square, inherit (initial butt)</text>
72: <text x="30" y="390">stroke-miterlimit: wert >=1 (initial 4)</text>
73:
74: </svg>
[zum Anfang]
