Füllen und streichen Sie SVG mit csharp

SVG (Scalable Vector Graphics) ist ein XML-basiertes webfreundliches Vektordateiformat. Es wird verwendet, um visuelle Informationen auf einer Webseite anzuzeigen. SVG-Bilder sind skalierbar, ohne die Bildqualität zu verändern. In diesem Artikel erfahren Sie, wie Sie in SVG mit C# mit Füllung und Strich arbeiten.

Folgende Themen sollen in diesem Artikel behandelt werden:

  1. C#-API zum Füllen und Konturieren in SVG
  2. Was ist SVG-Füllung
  3. Was ist SVG-Strich
  4. Striche und Füllungen in SVG
  5. Füll- und Strichkreis in SVG
  6. Füll- und Strichpfad in SVG
  7. Füllung und Kontur mit Stil anwenden

C#-API zum Füllen und Konturieren in SVG

Um mit Füll- und Strichattributen von SVG in C# zu arbeiten, verwenden wir die API Aspose.SVG for .NET. Es ermöglicht das Laden, Analysieren, Rendern, Erstellen und Konvertieren von SVG-Dateien in gängige Formate ohne Softwareabhängigkeiten.

Die Klasse SVGDocument der API stellt den Stamm der SVG-Hierarchie dar und enthält den gesamten Inhalt. Die Methode Save() dieser Klasse ermöglicht das Speichern von SVG im angegebenen Dateipfad. Die Methode QuerySelector() gibt das erste Element im Dokument zurück, das mit dem Selektor übereinstimmt. Die API unterstützt die Arbeit mit gängigen Formen wie Rechtecken, Kreisen, Ellipsen, Linien, Polylinien usw. Die API bietet separate Klassen zur Darstellung dieser unterstützten Formen wie SVGCircleElement für Kreise, SVGPolygonElement für Polygone usw.

Bitte laden Sie die DLL der API herunter oder installieren Sie sie mit NuGet.

PM> Install-Package Aspose.SVG

Was ist SVG Fill?

Die Fill-Eigenschaft ist eines der grundlegenden SVG-Präsentationsattribute, das verwendet wird, um die Farbe der Form innerhalb ihres Umrisses festzulegen.

Wir können die folgenden Füllattribute definieren:

  • Füllung: Legt die zu füllende Farbe fest. Geben Sie none oder transparent an, wenn keine Füllung vorhanden ist.
  • fill-opacity: Legt den Deckkraftwert zwischen 0 und 1 fest.
  • Füllregel: Definiert, wie der Innenbereich einer Form bestimmt wird, z. B. ungleich Null, gerade ungerade.

Was ist SVG-Strich?

Die Stroke-Eigenschaft definiert den Umriss oder einen Rahmen von SVG-Formen. Das Strichdarstellungsattribut legt die Farbe des Umrisses der Form fest.

Wir können die folgenden Strichattribute festlegen:

  • Strich: Legt den Farbwert fest.
  • Stroke-Dasharray: Gibt die gestrichelten Linientypen an.
  • Strich-Dashoffset
  • Stroke-Linecap: Steuert die Form der Enden von Linien, z. B. stumpf, quadratisch und rund.
  • stroke-linejoin: Gibt an, wie zwei Linien verbunden werden, z. B. Gehrung, Abschrägung und Rundung.
  • Stroke-Miterlimit: Muss größer oder gleich 1 sein, falls verwendet.
  • Stroke-Opacity: Legt den Opazitätswert zwischen 0 und 1 fest.
  • Strichbreite: Legt die Breite fest.

Füllungen und Striche in SVG

Sowohl die Füllung als auch der Strich werden verwendet, um Grafiken in SVG mit Farbe, Farbverläufen oder Mustern zu versehen. Die Füllung malt das Innere des SVG-Elements, während der Strich seinen Umriss malt. Wir können sowohl Füllung als auch Kontur im Stilattribut angeben oder sie als Präsentationsattribute verwenden.

Wir können SVG-Füllungen und SVG-Striche im Stilattribut wie unten gezeigt festlegen:

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

Wir können die gleichen Stileigenschaften auch in den Präsentationsattributen verwenden, wie unten gezeigt:

stroke="green" stroke-width="2" fill="#ff0000"

Zur Angabe der SVG-Farbe können wir Farbnamen wie Rot, Blau usw. verwenden. Wir können auch RGB-Werte oder HEX-Werte für die Farben verwenden.

Kreis ausfüllen und streichen in C#

Wir können SVG-Füll- und SVG-Stricheigenschaften für einen Kreis festlegen, indem wir die folgenden Schritte ausführen:

  1. Laden Sie zunächst ein vorhandenes SVG mithilfe der Klasse SVGDocument.
  2. Rufen Sie als Nächstes das Stammelement des Dokuments ab.
  3. Suchen Sie dann alle Kreiselemente mit der Methode QuerySelectorAll().
  4. Legen Sie danach die Füllattribute für das ausgewählte SVGCircleElement fest.
  5. Legen Sie optional die Strichattribute für das ausgewählte SVGCircleElement fest.
  6. Speichern Sie schließlich das ausgegebene SVG-Bild mit der Methode Save().

Das folgende Codebeispiel zeigt, wie Füllung und Strich für ein Kreiselement von SVG in C# festgelegt werden.

// Dieses Codebeispiel zeigt, wie Füll- und Strichattribute für ein Kreiselement von SVG in C# festgelegt werden.
// Laden Sie ein vorhandenes SVG-Bild
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Holen Sie sich das Root-SVG-Element des Dokuments
var svgElement = document.RootElement;

// Finden Sie alle Kreiselemente im g-Element
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Holen Sie sich das erste Kreiselement
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Füllattribute festlegen
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Strichattribute festlegen
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Speichern Sie die SVG-Datei
document.Save(@"C:\Files\SVG\Fill-Circle.svg");
Fill-and-Stroke-Circle-in-CSharp

Legen Sie Füllung und Strich für das Kreiselement in C# fest.

Nachfolgend finden Sie den Inhalt des Circle.svg-Bildes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

Hier ist der Inhalt des Bildes Fill-Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

Füll- und Strichpfad in C#

Wir können SVG-Füll- und SVG-Stricheigenschaften für ein Pfadelement in SVG festlegen, indem wir die folgenden Schritte ausführen:

  1. Laden Sie zunächst ein vorhandenes SVG mithilfe der Klasse SVGDocument.
  2. Rufen Sie als Nächstes das Stammelement des Dokuments ab.
  3. Rufen Sie dann das Pfadelement mit der Methode QuerySelector() ab.
  4. Legen Sie danach die Füllattribute für das ausgewählte SVGPathElement fest.
  5. Legen Sie optional die Strichattribute für das ausgewählte SVGPathElement fest.
  6. Speichern Sie schließlich das ausgegebene SVG-Bild mit der Methode Save().

Das folgende Codebeispiel zeigt, wie Füllung und Strich für ein Pfadelement von SVG in C# festgelegt werden.

// In diesem Codebeispiel wird veranschaulicht, wie Füll- und Strichattribute für ein Pfadelement von SVG in C# festgelegt werden.
// Laden Sie ein vorhandenes SVG-Bild
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Holen Sie sich das Root-SVG-Element des Dokuments
var svgElement = document.RootElement;

// Holen Sie sich das erste Pfadelement
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Füllattribute festlegen
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Strichattribute festlegen
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Speichern Sie die SVG-Datei
document.Save(@"C:\Files\SVG\Fill-Path.svg");
Fill-and-Stroke-Path-in-CSharp

Legen Sie Füllung und Kontur für das Pfadelement in C# fest.

Nachfolgend finden Sie den Inhalt des Bildes Sample-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

Nachfolgend finden Sie den Inhalt des Fill-Path.svg-Bildes.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

Wenden Sie Füllung und Kontur mit Style in C# an

Wir können die Eigenschaften SVG-Füllung und SVG-Strich auch mithilfe des CSS-Stilattributs anwenden, indem Sie die folgenden Schritte ausführen:

  1. Erstellen Sie zunächst eine Instanz der SVGDocument-Klasse.
  2. Rufen Sie als Nächstes das Stammelement des Dokuments ab.
  3. Erstellen Sie dann mit der Methode CreateElementNS() ein Kreiselement.
  4. Legen Sie als Nächstes die grundlegenden Eigenschaften des Kreises wie Cx, Cy und R fest.
  5. Wenden Sie dann das style-Attribut mit der SetAttribute()-Methode an.
  6. Hängen Sie danach das untergeordnete Element mit der AppendChild()-Methode an.
  7. Speichern Sie schließlich das ausgegebene SVG-Bild mit der Methode Save().

Das folgende Codebeispiel zeigt, wie Sie die Füllung und den Strich mithilfe des CSS-Stils in C# anwenden.

// Dieses Codebeispiel zeigt, wie Sie die Fill- und Stroke-Attribute mithilfe des CSS-Stils in C# anwenden.
// Erstellen Sie eine neue SVG-Datei
using (var document = new SVGDocument())
{
    // Holen Sie sich das Root-SVG-Element des Dokuments
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Kreis hinzufügen
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Stilattribut festlegen
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Fügen Sie dem Stammelement einen Kreis hinzu
    svgElement.AppendChild(circle);
    
    // Speichern Sie die SVG-Datei
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}
Anwenden-Füllen-und-Strichen-mit-Stil-in-CSharp

Wenden Sie die Füllung und den Strich im CSS-Stil an

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

Holen Sie sich eine kostenlose temporäre Lizenz

Sie können eine kostenlose temporäre Lizenz erhalten, um Aspose.SVG für .NET ohne Evaluierungseinschränkungen zu testen.

Fazit

In diesem Artikel haben wir gelernt, wie man:

  • Erstellen Sie ein neues SVG-Bild;
  • Laden Sie ein vorhandenes SVG-Bild;
  • ein SVG-Bild bearbeiten;
  • Füll- und Strichattribute für SVG-Formen festlegen;
  • Legen Sie Stilattribute für die Formen in C# fest.

Außerdem können Sie in der Dokumentation mehr über Aspose.SVG für .NET erfahren und verschiedene Funktionen erkunden, die von der API unterstützt werden. Bei Unklarheiten können Sie sich gerne in unserem Forum an uns wenden.

Siehe auch