Rysowanie prostokątów

Element <rect> tworzy prostokąt umieszczony w układzie współrzędnych użytkownika. Można również tworzyć zaokrąglone prostokąty za pomocą atrybutów rx i ry. Składnia:

 <rect x="START_X_COORD" 
       y="START_Y_COORD" 
       width="WIDTH" 
       height="HEIGHT"
       rx="X_RADIUS_FOR_CORNER"
       ry="Y_RADIUS_FOR_CORNER" />

Przykład:

 1<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" >
 2  <g transform="translate(0,0)">
 3    <rect x="10"  y="10"  width="100" height="100" />
 4  </g>
 5  <g transform="translate(150,0)">
 6    <rect x="10" y="10"  width="50"  height="100" />
 7  </g>
 8  <g transform="translate(0,150)">
 9    <rect x="10"  y="10" width="100" height="100" rx="20" />
10  </g>
11  <g transform="translate(150,150)">
12    <rect x="10" y="10"  width="100" height="100" rx="30" ry="5"/>
13  </g>
14</svg>

[pokaż zawartość pliku] [pobierz plik] idź do góry

Rysowanie ścieżek

Ścieżki reprezentują obrys kształtu, który może być wypełniony, obrysowany lub użyty jako ścieżka wycinająca. Składnia:

 <path d="PATH_DATA" pathLength="LENGTH"/>

W znaczniku <path> można stosować następujące komendy:

• M - przesuń do
• L = narysuj linię do
• H = narysuj linię poziomą do
• V = narysuj linię pionową do
• C = narysuj krzywą Beziera
• S = narysuj krzywą Beziera (smooth)
• Q = narysuj kwadratową krzywą Beziera
• T = narysuj kwadratową krzywą Beziera (smooth)
• A = narysuj eliptyczny łuk kąta
• Z = zamknij ścieżkę

Każda z wyżej wymienionych komend może być również zapisana za pomocą małej litery. Spowoduje to, że podane współrzędne będą traktowane jako wspołrzędne względne. Przykład:

 1<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" >
 2  <g transform="translate(0,0)">
 3    <path d="M10,20 L110,20 60,120 z" 
 4          style="fill:red; stroke:black;"/>
 5  </g>
 6  <g transform="translate(110,0)">
 7    <path d="M10,20 l100,0 -50,100 z" 
 8          style="fill:green; stroke:black;"/>
 9  </g>
10  <g transform="translate(0,110)">
11    <path d="M10,20 H110 V120 H10 z"   
12          style="fill:yellow; stroke:black;"/>
13  </g>
14  <g transform="translate(110,110)">
15    <path d="M10,20 h100 v100 h-100 z" 
16          style="fill:blue; stroke:black;"/>
17  </g>
18</svg>

[pokaż zawartość pliku] [pobierz plik] idź do góry

Napisy

 1<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 2  <g transform="translate(0,0)" style="font-size: 12pt;">
 3    <text x="10" y="20">
 4      To jest pierwsza linia tekstu
 5      To jest druga linia tekstu
 6    </text>
 7    <text x="10" y="40" style="fill: blue;" >
 8      To jest pierwsza linia tekstu
 9      <tspan x="10" y="56" >To jest druga linia tekstu</tspan>
10    </text>
11    <text x="10" y="76" style="fill: red;" >
12      To jest pierwsza linia tekstu
13      <tspan x="10" dy="16" >To jest druga linia tekstu</tspan>
14    </text>
15  </g>

16  <g transform="translate(0,150)" style="font-size: 12pt;">
17    <text y="10" x="150" 
18          style="text-anchor:start;">text-anchor:start</text>
19    <text y="26" x="150" 
20          style="text-anchor:middle; fill: blue;">text-anchor:middle</text>
21    <text y="42" x="150" 
22          style="text-anchor:end; fill: red;">text-anchor:end</text>
23  </g>
24  
25  <g transform="translate(0,250)" style="font-size: 12pt;">
26    <text y="0" x="150" 
27          style="writing-mode: tb;">top -> bottom</text>
28    <text y="0" x="150" 
29          style="writing-mode: lr; fill: blue;">left -> right</text>
30    <text y="0" x="150" 
31          style="writing-mode: rl; fill: red;">right -> left</text>
32  </g>
33</svg>

[pokaż zawartość pliku] [pobierz plik] idź do góry

Zdarzenia

 1<svg xmlns="http://www.w3.org/2000/svg"> 
 2  <script type="text/ecmascript">
 3    <![CDATA[
 4    function showMsg(evt) {
 5      msg=document.getElementById("btn").getAttributeNS(null,"fill")
 6      alert(msg)
 7    }
 8    ]]>
 9  </script>  
10  <g onclick="showMsg(evt)">
11    <rect id="btn" width="100" height="50" 
12          x="10" y="10" fill="yellow" />
13    <text x="60" y="40" 
14          style="text-anchor:middle;">Click me !</text>      
15  </g>
16</svg>

[pokaż zawartość pliku] [pobierz plik] idź do góry