Konvertera text till SVG i C#

SVG Textelementet används för att definiera en text i SVG. SVG (Scalable Vector Graphics) är ett webbvänligt vektorfilformat. Den används för att visa visuell information på en webbsida. Vi kan enkelt skriva vilken text som helst i SVG med SVG Text-elementet. I den här artikeln kommer vi att lära oss hur man konverterar text till SVG i C#.

Följande ämnen ska behandlas i den här artikeln:

  1. C# API för att konvertera text till SVG
  2. Vad är SVG-text
  3. Konvertera text till SVG
  4. Konvertera text med TSpan till SVG
  5. SVG-text med TextPath
  6. Använd SVG-textstilar

C# API för att konvertera text till SVG

För att konvertera text till SVG kommer vi att använda Aspose.SVG for .NET API. Det tillåter att ladda, analysera, rendera, skapa och konvertera SVG-filer till populära format utan några mjukvaruberoenden.

Klassen SVGDocument i API:t representerar roten till SVG-hierarkin och innehåller hela innehållet. Vi har metoden Save() i den här klassen som gör det möjligt att spara SVG till den angivna sökvägen. Klassen SVGTextElement representerar “text”-elementet. Gränssnittet SVGTspanElement motsvarar “tspan”-elementet. API tillhandahåller klassen SVGTextPathElement som representerar “textPath”-elementet och SVGPathElement för “path”-elementet. Vi kan ställa in olika egenskaper/attribut för SVG-element med metoden SetAttribute(string, string). Metoden AppendChild(Node) för API:et lägger till nodens nya underordnade i slutet av listan över underordnade till denna nod.

Vänligen antingen ladda ner DLL för API:t eller installera den med NuGet.

PM> Install-Package Aspose.SVG

Vad är SVG-text?

I SVG renderas texten med -elementet. Som standard renderas texten med en svart fyllning och ingen kontur. Vi kan definiera följande attribut:

  • x: ställer in punktens position horisontellt.
  • y: ställer in punktens position vertikalt.
  • fyll: definierar den renderade textfärgen.
  • transform : rotera, översätta, skeva och skala.

Konvertera text till SVG med C#

Vi kan lägga till vilken text som helst i SVG genom att följa stegen nedan:

  1. Skapa först en instans av SVGDocument-klassen.
  2. Hämta sedan dokumentets rotelement.
  3. Skapa sedan klassobjektet SVGTextElement.
  4. Ställ sedan in olika attribut med metoden SetAttribute().
  5. Därefter anropar du metoden AppendChild() för att lägga till den i rotelementet.
  6. Slutligen, spara den utgående SVG-bilden med hjälp av metoden Save().

Följande kodexempel visar hur man konverterar text till SVG i C#.

// Detta kodexempel visar hur man lägger till text i SVG.
var document = new SVGDocument();

// Hämta root svg-elementet i dokumentet
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

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

// Definiera text som ska visas
text.TextContent = "The is a simple SVG text!";

// Ställ in olika attribut
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Lägg till text i roten
svgElement.AppendChild(text);

// Spara som SVG
document.Save(@"C:\Files\simple-text.svg");
Konvertera-text-till-SVG-med-CSharp

Konvertera text till SVG med C#.

Nedan hittar du innehållet i simple-text.svg-bilden.

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

Konvertera text med TSpan till SVG i C#

SVG -elementet definierar en undertext inom ett -element. Vi kan lägga till vilken text som helst med ett tspan-element till SVG genom att följa stegen nedan:

  1. Skapa först en instans av SVGDocument-klassen.
  2. Hämta sedan dokumentets rotelement.
  3. Skapa sedan klassobjektet SVGTextElement.
  4. Alternativt kan du ställa in olika attribut med metoden SetAttribute().
  5. Definiera sedan SVGTSpanElement-objektet.
  6. Ställ sedan in dess attribut med metoden SetAttribute().
  7. Anrop nu metoden AppendChild() för att lägga till den i SVGTextElement-elementet.
  8. Upprepa stegen ovan för att lägga till fler SVGTSpanElement-objekt.
  9. Efter det, anrop metoden AppendChild() för att lägga till SVGTextElement till rotelementet.
  10. Spara slutligen den utgående SVG-bilden med hjälp av metoden Save().

Följande kodexempel visar hur man konverterar text med tspan till SVG i C#.

// Detta kodexempel visar hur man lägger till text med tspan till SVG.
var document = new SVGDocument();

// Hämta root svg-elementet i dokumentet
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");

// Lägg till SVG-text
text.AppendChild(tspan1);

// Ytterligare ett 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");

// Lägg till SVG-text
text.AppendChild(tspan2);

// Lägg till SVG-text till root
svgElement.AppendChild(text);

// Spara SVG
document.Save(@"C:\Files\svg-tSpan.svg");
SVG-Text-med-tspan-i-CSharp

Konvertera text med tspan till SVG i C#.

Nedan hittar du innehållet i svg-tspan.svg-bilden.

<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 med TextPath i C#

Vi kan också rendera text längs formen av ett -element och omsluta texten i ett -element. Det gör det möjligt att ställa in en referens till -elementet med hjälp av href-attributet. Vi kan konvertera text med textvägar genom att följa stegen nedan:

  1. Skapa först en instans av SVGDocument-klassen.
  2. Hämta sedan dokumentets rotelement.
  3. Skapa sedan klassobjektet SVGPathElement och ställ in olika attribut med metoden SetAttribute().
  4. Därefter anropar du metoden AppendChild() för att lägga till den i rotelementet.
  5. Skapa sedan klassobjektet SVGTextElement.
  6. Initiera sedan SVGTextPathElement-objektet och ställ in textinnehåll.
  7. Tilldela sedan SVGPathElement till dess href-attribut med metoden SetAttribute().
  8. Anrop sedan metoden AppendChild() för att lägga till SVGTextPathElement till SVGTextElement-elementet.
  9. Efter det lägger du till SVGTextElement till rotelementet med metoden AppendChild().
  10. Spara slutligen den utgående SVG-bilden med hjälp av metoden Save().

Följande kodexempel visar hur man konverterar text med textPath till SVG i C#.

// Detta kodexempel visar hur man lägger till text med textPath till SVG.
var document = new SVGDocument();

// Hämta root svg-elementet i dokumentet
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG Path-element
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");

// Lägg till SVG-sökväg till rotelementet
svgElement.AppendChild(path1);

// Another SVG Path-element
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");

// Lägg till SVG-sökväg till rotelementet
svgElement.AppendChild(path2);

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

// Skapa SVG Text Path-element
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");

// Lägg till SVG-textsökväg till SVG-text
text.AppendChild(textPath1);

// Ett annat SVG Text Path-element
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");

// Lägg till SVG-textsökväg till SVG-text
text.AppendChild(textPath2);

// Lägg till SVG-text till root
svgElement.AppendChild(text);

// Spara SVG
document.Save(@"C:\Files\svg-textPath.svg");
SVG-Text-med-textPath-in-CSharp

Konvertera text med textPath till SVG i C#.

Nedan hittar du innehållet i svg-textPath.svg-bilden.

<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>

Använd SVG-textstil i C#

Vi kan lägga till vilken text som helst i SVG genom att följa stegen nedan:

  1. Skapa först en instans av SVGDocument-klassen.
  2. Hämta sedan dokumentets rotelement.
  3. Skapa sedan klassobjektet SVGTextElement.
  4. Ställ sedan in stilattributet med metoden SetAttribute().
  5. Därefter anropar du metoden AppendChild() för att lägga till den i rotelementet.
  6. Slutligen, spara den utgående SVG-bilden med hjälp av metoden Save().

Följande kodexempel visar hur man tillämpar CSS-stilar på SVG-text i C#.

// Detta kodexempel visar hur man lägger till text i SVG och tillämpar CSS-stilattribut.
var document = new SVGDocument();

// Hämta root svg-elementet i dokumentet
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

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

// Definiera text som ska visas
text.TextContent = "The is a simple SVG text!";

// Ställ in olika attribut
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Applicera stil
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// Lägg till text i roten
svgElement.AppendChild(text);

// Spara som SVG
document.Save(@"C:\Files\text-style.svg");
Apply-SVG-Text-Style-in-CSharp

Använd SVG-textstil i C#.

Nedan hittar du innehållet i text-style.svg-bilden.

<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>

Få gratis tillfällig licens

Du kan få en gratis tillfällig licens för att prova Aspose.SVG för .NET utan utvärderingsbegränsningar.

Slutsats

I den här artikeln har vi lärt oss hur man:

  • skapa en ny SVG-bild;
  • använd SVG-textelement;
  • återge SVG-text till sökvägen;
  • ställ in positions- och fyllningsattribut för SVG-text;
  • ställ in stilattribut för SVG-texten i C#.

Förutom att konvertera text till SVG i C# kan du lära dig mer om Aspose.SVG för .NET i dokumentationen och utforska olika funktioner som stöds av API:et. I händelse av oklarheter är du välkommen att kontakta oss på vårt gratis supportforum.

Se även