Konvertieren Sie Text in C# in SVG

Das Element SVG Text wird verwendet, um einen Text in SVG zu definieren. SVG (Scalable Vector Graphics) ist ein webfreundliches Vektordateiformat. Es wird verwendet, um visuelle Informationen auf einer Webseite anzuzeigen. Mit dem SVG-Textelement können wir ganz einfach jeden Text in SVG schreiben. In diesem Artikel erfahren Sie, wie Sie Text in C# in SVG konvertieren.

Folgende Themen sollen in diesem Artikel behandelt werden:

1. C#-API zum Konvertieren von Text in SVG
2. Was ist SVG-Text
3. Text in SVG umwandeln
4. Text mit TSpan in SVG umwandeln
5. SVG-Text mit TextPath
6. SVG-Textstile anwenden

C#-API zum Konvertieren von Text in SVG

Um Text in SVG umzuwandeln, 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. Wir haben die Methode Save() in dieser Klasse, die das Speichern von SVG im angegebenen Dateipfad ermöglicht. Die Klasse SVGTextElement repräsentiert das Element „Text“. Die SVGTSpanElement-Schnittstelle entspricht dem ’tspan’-Element. Die API stellt die Klasse SVGTextPathElement bereit, die das Element „textPath“ darstellt, und SVGPathElement für das Element „path“. Wir können verschiedene Eigenschaften/Attribute für SVG-Elemente mit der Methode SetAttribute(string, string) festlegen. Die Methode AppendChild(Node) der API fügt das neue untergeordnete Element des Knotens am Ende der Liste der untergeordneten Elemente dieses Knotens hinzu.

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

PM> Install-Package Aspose.SVG

Was ist SVG-Text?

In SVG wird der Text mit dem -Element gerendert. Standardmäßig wird der Text mit einer schwarzen Füllung und ohne Umriss gerendert. Wir können die folgenden Attribute definieren:

• x: legt die Position des Punktes horizontal fest.
• y: setzt die Position des Punktes vertikal.
• fill: definiert die gerenderte Textfarbe.
• transformieren: drehen, verschieben, neigen und skalieren.

Konvertieren Sie Text mit C# in SVG

Wir können SVG einen beliebigen Text hinzufügen, indem wir 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 das Klassenobjekt SVGTextElement.
4. Legen Sie als Nächstes verschiedene Attribute mit der Methode SetAttribute() fest.
5. Rufen Sie danach die Methode AppendChild() auf, um sie an das Stammelement anzuhängen.
6. Speichern Sie abschließend das ausgegebene SVG-Bild mit der Methode Save().

Das folgende Codebeispiel zeigt, wie Text in C# in SVG konvertiert wird.

// Dieses Codebeispiel zeigt, wie Text zu SVG hinzugefügt wird.
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";

// Definieren Sie das SVG-Textelement
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Definieren Sie den anzuzeigenden Text
text.TextContent = "The is a simple SVG text!";

// Legen Sie verschiedene Attribute fest
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Text an die Wurzel anhängen
svgElement.AppendChild(text);

// Als SVG speichern
document.Save(@"C:\Files\simple-text.svg");

Nachfolgend finden Sie den Inhalt des Bildes simple-text.svg.

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30">The is a simple SVG text!</text>
</svg>

Konvertieren Sie Text mit TSpan in SVG in C#

Das SVG-Element definiert einen Subtext innerhalb eines -Elements. Wir können jeden Text mit einem tspan-Element zu SVG hinzufügen, indem wir 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 das Klassenobjekt SVGTextElement.
4. Legen Sie optional verschiedene Attribute mit der Methode SetAttribute() fest.
5. Definieren Sie als Nächstes das SVGTSpanElement-Objekt.
6. Legen Sie dann seine Attribute mit der Methode SetAttribute() fest.
7. Rufen Sie nun die AppendChild()-Methode auf, um sie an das SVGTextElement-Element anzuhängen.
8. Wiederholen Sie die obigen Schritte, um weitere SVGTSpanElement-Objekte hinzuzufügen.
9. Rufen Sie danach die Methode AppendChild() auf, um SVGTextElement an das Stammelement anzuhängen.
10. Speichern Sie abschließend das ausgegebene SVG-Bild mit der Methode Save().

Das folgende Codebeispiel zeigt, wie Text mit tspan in C# in SVG konvertiert wird.

// Dieses Codebeispiel zeigt, wie Text mit tspan zu SVG hinzugefügt wird.
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";

// SVG-Textelement
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");
text.SetAttribute("style", "font-family:arial");
text.SetAttribute("x", "20");
text.SetAttribute("y", "60");

// SVG TSpan-Element
var tspan1 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan1.TextContent = "ASPOSE";
tspan1.SetAttribute("style", "font-weight:bold; font-size:55px");
tspan1.SetAttribute("x", "20");
tspan1.SetAttribute("y", "60");

// An SVG-Text anhängen
text.AppendChild(tspan1);

// Ein weiteres TSpan-Element
var tspan2 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan2.TextContent = "Your File Format APIs";
tspan2.SetAttribute("style", "font-size:20px; fill:grey");
tspan2.SetAttribute("x", "37");
tspan2.SetAttribute("y", "90");

// An SVG-Text anhängen
text.AppendChild(tspan2);

// Hängen Sie SVG-Text an root an
svgElement.AppendChild(text);

// Speichern Sie die SVG-Datei
document.Save(@"C:\Files\svg-tSpan.svg");

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

<svg xmlns="http://www.w3.org/2000/svg">
    <text style="font-family: arial;" x="20" y="60">
        <tspan style="font-weight: bold; font-size: 55px;" x="20" y="60">ASPOSE</tspan>
        <tspan style="font-size: 20px; fill: grey;" x="37" y="90">Your File Format APIs</tspan>
    </text>
</svg>

SVG-Text mit TextPath in C#

Wir können Text auch entlang der Form eines -Elements rendern und den Text in ein -Element einschließen. Es ermöglicht das Setzen eines Verweises auf das -Element mithilfe des href-Attributs. Wir können Text mit Textpfaden konvertieren, indem wir 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 das Klassenobjekt SVGPathElement und legen Sie verschiedene Attribute mit der Methode SetAttribute() fest.
4. Rufen Sie danach die Methode AppendChild() auf, um sie an das Stammelement anzuhängen.
5. Erstellen Sie als Nächstes das Klassenobjekt SVGTextElement.
6. Initialisieren Sie dann das SVGTextPathElement-Objekt und legen Sie den Textinhalt fest.
7. Weisen Sie als nächstes das SVGPathElement seinem href-Attribut zu, indem Sie die SetAttribute()-Methode verwenden.
8. Rufen Sie dann die AppendChild()-Methode auf, um SVGTextPathElement an das SVGTextElement-Element anzuhängen.
9. Hängen Sie danach SVGTextElement mit der Methode AppendChild() an das Stammelement an.
10. Speichern Sie abschließend das ausgegebene SVG-Bild mit der Methode Save().

Das folgende Codebeispiel zeigt, wie Text mit textPath in SVG in C# konvertiert wird.

// Dieses Codebeispiel zeigt, wie Text mit textPath zu SVG hinzugefügt wird.
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";

// SVG-Pfadelement
var path1 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path1.SetAttribute("id", "path_1");
path1.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100");
path1.SetAttribute("fill", "transparent");

// Hängen Sie den SVG-Pfad an das Stammelement an
svgElement.AppendChild(path1);

// Another SVG-Pfadelement
var path2 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path2.SetAttribute("id", "path_2");
path2.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100");
path2.SetAttribute("transform", "translate(0,75)");
path2.SetAttribute("fill", "transparent");

// Hängen Sie den SVG-Pfad an das Stammelement an
svgElement.AppendChild(path2);

// SVG-Textelement
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Erstellen Sie ein SVG-Textpfadelement
var textPath1 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath1.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath1.SetAttribute("href", "#path_1");

// Hängen Sie den SVG-Textpfad an den SVG-Text an
text.AppendChild(textPath1);

// Ein weiteres SVG-Textpfadelement
var textPath2 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath2.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath2.SetAttribute("href", "#path_2");

// Hängen Sie den SVG-Textpfad an den SVG-Text an
text.AppendChild(textPath2);

// Hängen Sie SVG-Text an root an
svgElement.AppendChild(text);

// Speichern Sie die SVG-Datei
document.Save(@"C:\Files\svg-textPath.svg");

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

<svg xmlns="http://www.w3.org/2000/svg">
    <path id="path_1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent"/>
    <path id="path_2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent"/>
    <text>
        <textPath href="#path_1">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
        <textPath href="#path_2">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
    </text>
</svg>

Wenden Sie den SVG-Textstil in C# an

Wir können SVG einen beliebigen Text hinzufügen, indem wir 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 das Klassenobjekt SVGTextElement.
4. Legen Sie als Nächstes das Stilattribut mit der Methode SetAttribute() fest.
5. Rufen Sie danach die Methode AppendChild() auf, um sie an das Stammelement anzuhängen.
6. Speichern Sie abschließend das ausgegebene SVG-Bild mit der Methode Save().

Das folgende Codebeispiel zeigt, wie CSS-Stile auf SVG-Text in C# angewendet werden.

Nachfolgend finden Sie den Inhalt des Bildes text-style.svg.

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30" style="font-weight: bold; font-style: italic; text-decoration-line: line-through; text-transform: capitalize;">The is a simple SVG text!</text>
</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;
• Verwenden Sie SVG-Textelemente;
• rendern Sie SVG-Text in den Pfad;
• Positions- und Füllattribute für SVG-Text festlegen;
• Stilattribute für den SVG-Text in C# festlegen.

Neben der Konvertierung von Text in SVG in C# können Sie in der Dokumentation mehr über Aspose.SVG für .NET erfahren und verschiedene von der API unterstützte Funktionen erkunden. Bei Unklarheiten können Sie sich gerne in unserem kostenlosen Support-Forum an uns wenden.

Siehe auch

• Füllen und Konturieren in SVG mit C#