SVG – Learning by Coding

[ stroke-properties.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 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-familysans-serif;
23:         font-size12px;
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:   <!-- strokefarbe; stroke-widthlaenge (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-width10px</text>
39: 
40:   <!-- stroke-linejoinmiterroundbevelinherit (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-linejoinround</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-linejoinbevel</text>
48: 
49:   <!-- stroke-dasharraystrich leer strich leer ... -->
50:   <!-- ungerade Anzahl wird verdoppelt5,10,5,10,5,5,10,-->
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-width2px</text>
54:   <text x="30" y="315">stroke-dasharray5,10</text>
55: 
56:   <!-- stroke-dashoffsetlaenge (initial 0) -->
57:   <rect x="200" y="200" width="150" height="80"
58:     style="fill: none; stroke: #00C; stroke-width: 2px;
59:       stroke-dasharray5,10,10; stroke-dashoffset50"/>
60:   <text x="200" y="300">stroke-dasharray5,10,10</text>
61:   <text x="200" y="315">stroke-dashoffset50</text>
62: 
63:   <!-- stroke-opacity0 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-opacity0.3</text>
67: 
68:   <!-- hier nicht verwendet: -->
69:   <text x="30" y="350">weitere Eigenschaften:</text>
70:   <text x="30" y="370">
71:     stroke-linecapbuttroundsquareinherit (initial butt)</text>
72:   <text x="30" y="390">stroke-miterlimitwert >=(initial 4)</text>
73: 
74: </svg>

[zum Anfang]