SVG Grundsyntax

Ein SVG-Dokument besteht aus einem oder mehreren SVG-Elementen, die den Inhalt und die Eigenschaften der Grafik definieren.

<svg
  width="200"     <!-- 指定SVG画布的宽度 -->
  height="200"    <!-- 指定SVG画布的高度 -->
  xmlns="http://www.w3.org/2000/svg">   <!-- 指定SVG命名空间 -->
  <!-- SVG图形内容 -->
</svg>

  • widthundheightDie Attribute definieren die Breite und Höhe der SVG-Zeichenfläche.

  • xmlnsDas Attribut gibt den XML-Namespace des SVG-Dokuments an.

Grundlegende Syntax von SVG:

  • Ein SVG-Dokument beginnt mit<svg>dem Tag und endet mit</svg>dem Tag.

  • SVG-Elemente verwenden Tags, um verschiedene Grafiken zu beschreiben, zum Beispiel<circle>stellt einen Kreis dar,<rect>stellt ein Rechteck dar, usw.

  • SVG-Elemente können Attribute enthalten, um verschiedene Eigenschaften der Grafiken anzugeben, wie Position, Größe, Farbe usw.

Zeichnen grundlegender Formen:

SVG bietet eine Reihe von grafischen Elementen zum Zeichnen verschiedener Formen, wie Rechtecke, Kreise, Linien, Polygone usw.

  • <rect>: Zeichnen Sie ein Rechteck
  • <circle>: Zeichnen Sie einen Kreis
  • <ellipse>: Zeichnen Sie eine Ellipse
  • <line>: Zeichnen Sie eine Linie
  • <polyline>: Zeichnen Sie eine Polylinie
  • <polygon>: Zeichnen Sie ein Polygon
  • <path>: Zeichnen Sie einen Pfad

Rechtecke:Verwenden Sie das <rect>-Element, um ein Rechteck zu zeichnen; Sie können Attribute wie Position, Größe und abgerundete Ecken angeben.

<rect x="50" y="50" width="100" height="50" rx="10" ry="10" fill="blue" />

Kreise:Verwenden Sie das <circle>-Element, um einen Kreis zu zeichnen; Sie können die Koordinaten des Mittelpunkts und den Radius angeben.

<circle cx="100" cy="100" r="50" fill="red" />

Ellipsen:Verwenden Sie das <ellipse>-Element, um eine Ellipse zu zeichnen; Sie können die Koordinaten des Mittelpunkts und die Radien der Haupt- und Nebenachse angeben.

<ellipse cx="100" cy="100" rx="80" ry="50" fill="green" />

Linien:Verwenden Sie das <line>-Element, um eine Linie zu zeichnen; Sie müssen die Start- und Endkoordinaten angeben.

<line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />

Polygone:Verwenden Sie das <polygon>-Element, um ein Polygon zu zeichnen; Sie müssen die Koordinaten mehrerer Eckpunkte angeben.

<polygon points="100,50 150,150 50,150" fill="orange" />

Polylinien:Verwenden Sie das <polyline>-Element, um eine Polylinie zu zeichnen; Sie müssen die Koordinaten mehrerer Punkte angeben.

<polyline points="100,50 150,150 50,150" fill="none" stroke="blue" stroke-width="2" />

Pfade:Verwenden Sie das <path>-Element, um einen Pfad zu zeichnen; Sie können verschiedene Formen zeichnen, indem Sie eine Reihe von Pfadbefehlen angeben.

<path d="M10 10 L90 10 L90 90 Z" fill="none" stroke="black" stroke-width="2" />

Farbverläufe und Füllungen:

  • Verwenden Sie<linearGradient>oder<radialGradient>um Farbverläufe zu definieren.

  • Verwenden SiefillundstrokeAttribute, um Füll- und Konturstile anzugeben.

Text und Schriftarten:

  • Verwenden Sie<text>Element zum Einfügen von Text.

  • Verwenden Siefont-family、font-sizeund andere Attribute, um den Textstil zu steuern.

Animation und Interaktion:

  • Verwenden Sie CSS oder JavaScript, um Animationseffekte zu erstellen.

  • Fügen Sie Event-Handler hinzu, um interaktive Funktionen wie Mausklicks, Hover usw. zu implementieren.

SVG-Elementattribute:

SVG-Elemente können verschiedene Attribute haben, um Eigenschaften wie Position, Größe und Farbe festzulegen.

<circle
  cx="100"       <!-- 圆心的x坐标 -->
  cy="100"       <!-- 圆心的y坐标 -->
  r="50"         <!-- 圆的半径 -->
  fill="red"     <!-- 填充颜色 -->
  stroke="black" <!-- 描边颜色 -->
  stroke-width="2" <!-- 描边宽度 -->
/>

  • cxundcyDie Attribute definieren die x- und y-Koordinaten des Mittelpunkts.

  • rDas Attribut definiert den Radius des Kreises.

  • fillDas Attribut definiert die Füllfarbe.

  • strokeDas Attribut definiert die Konturfarbe.

  • stroke-widthDas Attribut definiert die Konturbreite.

Verschachtelung und Gruppierung:

SVG-Elemente können verschachtelt und gruppiert werden, um grafische Elemente besser zu organisieren und zu verwalten.

<g id="group1">   <!-- 定义一个分组 -->
  <!-- 分组内的图形元素 -->
  <rect x="10" y="10" width="50" height="50" />
  <circle cx="100" cy="100" r="30" />
</g>

  • <g>Das Element wird verwendet, um eine Gruppe zu erstellen.

  • idDas Attribut wird verwendet, um der Gruppe eine eindeutige Kennung zuzuweisen.

Einfaches SVG-Beispiel

Es wird empfohlen,.svg(alles kleingeschrieben) als Dateiendung für solche Dateien zu verwenden.

1. Das Folgende ist ein einfaches SVG-Dateibeispiel, das ein SVG-Bild mit einem Kreis erstellt:

test.svg-Datei

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

Dieser Code beschreibt eine SVG-Zeichenfläche mit einer Breite von 200 Einheiten und einer Höhe von 200 Einheiten. Auf der Zeichenfläche wird ein Kreis mit den Mittelpunktkoordinaten (100, 100), einem Radius von 80 Einheiten und einer blauen Füllfarbe gezeichnet.

Vorschau:

2. Ein weiteres einfaches SVG-Grafikbeispiel:

test.svg-Datei

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">EXAMPLE SVG TEST</text>

</svg>

Ausprobieren »

Das Ergebnis wird wie folgt angezeigt:

EXAMPLE SVG TEST

SVG-Code-Analyse:

  • <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">: Dies ist das Start-Tag des SVG-Dokuments, das die SVG-Version, die Basiskonfiguration (full) sowie die Breite und Höhe der Zeichenfläche angibt. Das Attribut xmlns definiert den XML-Namespace des SVG-Dokuments.

  • <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />: Dies ist ein Rechteck-Element; verwendet wird der<rect>-Tag, um es darzustellen. Seine Breite und Höhe sind beide auf die Breite und Höhe der Zeichenfläche (100%) gesetzt. Das Attribut stroke gibt die Rahmenfarbe des Rechtecks als Rot an, das Attribut stroke-width legt die Rahmenbreite auf 4 Einheiten fest, und das Attribut fill gibt die Füllfarbe des Rechtecks als Gelb an.

  • <circle cx="150" cy="100" r="80" fill="green" />: Dies ist ein Kreis-Element; verwendet wird der<circle>-Tag, um es darzustellen. Seine Mittelpunktkoordinaten (cx, cy) sind (150, 100), der Radius r beträgt 80 Einheiten, und das Attribut fill gibt die Füllfarbe des Kreises als Grün an.

  • <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">EXAMPLE SVG TEST</text>: Dies ist ein Text-Element; verwendet wird der<text>-Tag, um es darzustellen. Seine Startkoordinaten (x, y) sind (150, 115). Das Attribut font-size legt die Schriftgröße auf 16 Einheiten fest, das Attribut text-anchor setzt die horizontale Ausrichtung des Textes auf center, und das Attribut fill gibt die Textfarbe als Weiß an. Der Textinhalt ist "EXAMPLE SVG TEST".

  • </svg>: Dies ist das schließende Tag des SVG-Dokuments und markiert das Ende des SVG-Dokuments.

Andere Erweiterungen