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]
