SVG Tutorial

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das path-Element</title>
  <desc>moveto</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana; font-size:12px; fill:black;}
      path {fill:none; stroke:red; stroke-width:2px;}
    ]]>
    </style>
  </defs>

  <path d="M 80,90
           l -70,0
           l 0,20
           l 70,0
           M 110,120
           l 0,70
           l -20,0
           l 0,-70" />

  <text x="15" y="40" style="font-weight:bold; fill:red; font-size:14px;">
  Ein (1!) Pfad mit 2 Startpunkten
  </text>
  <circle cx="80" cy="90" r="3" />
  <text x="80" y="85">Startpunkt 1: M 80,90</text>
  <circle cx="110" cy="120" r="3" />
  <text x="110" y="115">Startpunkt 2: M 110,120</text>
</svg>
      

Durch die moveto-Anweisung mit Hilfe der Buchstben M oder m wird der "virtuelle Stift" am nachfolgend angegebenen Koordinatenpunkt aufgesetzt.

Am Anfang einer Pfaddefinition durch das d-Attribut muß immer eine moveto-Anweisung platziert werden. Eine Pfaddefinition fängt also immer mit einem M und einem nachfolgenden Koordinatenpunkt an.

Wenn die Pfaddefinition eine weitere moveto-Anweisung enthält, so springt der "virtuelle Stift" vom zuletzt festgelegen Punkt direkt zu dem mit M der m angegebenen Koordinatenpunkt - ohne eine Spur zu hinterlassen.

Im obigen Beispiel wurde genau ein unterbrochener Pfad definiert.
Der "virtuelle Stift" wird einmal neu aufgesetzt.
An Stelle der absoluten Anweisung M hätte natürlich auch die relative Anweisung m verwendet werden können. Der letzte Punkt des Pfades vor der moveto-Anweisung wird durch eine relative lineto-Anweisung bestimmt und liegt absolut in 80,110. Daher müßte die entsprechende relative moveto-Anweisung folgendermaßen festgelegt werden:
m 30,10.
Dies entspricht dem absoluten Koordinatenpunkt 110,120.

Beachten Sie: Auch unterbrochene Pfade können gefüllt sein, wenn die Teile des Pfades Flächen einschließen - diese werden dann gefüllt.
Damit der Pfad also nicht schwarz gefüllt dargestellt wird (Voreinstellung) muß fill ausdrücklich mit dem Wert none gesetzt werden.