Převést text na SVG v C#

Prvek SVG Text se používá k definování textu v SVG. SVG (Scalable Vector Graphics) je webový formát vektorových souborů. Používá se k zobrazení vizuálních informací na webové stránce. Pomocí prvku SVG Text můžeme snadno napsat libovolný text ve SVG. V tomto článku se naučíme, jak převést text do SVG v C#.

Tento článek bude obsahovat následující témata:

  1. C# API pro převod textu na SVG
  2. Co je text SVG
  3. Převést text na SVG
  4. Převést text pomocí TSpan na SVG
  5. Text SVG s TextPath
  6. Použít styly textu SVG

C# API pro převod textu na SVG

K převodu textu do SVG použijeme Aspose.SVG for .NET API. Umožňuje načítání, analýzu, vykreslování, vytváření a konverzi souborů SVG do oblíbených formátů bez jakékoli softwarové závislosti.

Třída SVGDocument API představuje kořen hierarchie SVG a obsahuje celý obsah. V této třídě máme metodu Save(), která umožňuje uložit SVG do zadané cesty k souboru. Třída SVGTextElement představuje prvek ’text’. Rozhraní SVGTSpanElement odpovídá prvku ’tspan’. Rozhraní API poskytuje třídu SVGTextPathElement představující prvek ’textPath’ a SVGPathElement pro prvek ‘cesta’. Pro prvky SVG můžeme nastavit různé vlastnosti/atributy pomocí metody SetAttribute(string, string). Metoda AppendChild(Node) API přidá nového potomka uzlu na konec seznamu potomků tohoto node.

Prosím buď stáhněte si DLL API, nebo jej nainstalujte pomocí NuGet.

PM> Install-Package Aspose.SVG

Co je to SVG Text?

V SVG je text vykreslen pomocí prvku . Ve výchozím nastavení je text vykreslen s černou výplní a bez obrysu. Můžeme definovat následující atributy:

  • x: nastaví polohu bodu vodorovně.
  • y: nastavuje polohu bodu svisle.
  • výplň: definuje barvu vykresleného textu.
  • transformovat: otáčení, překládání, zkosení a měřítko.

Převést text na SVG pomocí C#

Do SVG můžeme přidat libovolný text podle následujících kroků:

  1. Nejprve vytvořte instanci třídy SVGDocument.
  2. Dále získejte kořenový prvek dokumentu.
  3. Poté vytvořte objekt třídy SVGTextElement.
  4. Dále nastavte různé atributy pomocí metody SetAttribute().
  5. Poté zavolejte metodu AppendChild() a připojte ji ke kořenovému prvku.
  6. Nakonec uložte výstupní obraz SVG pomocí metody Save().

Následující ukázka kódu ukazuje, jak převést text na SVG v C#.

// Tento příklad kódu ukazuje, jak přidat text do SVG.
var document = new SVGDocument();

// Získejte kořenový prvek svg dokumentu
var svgElement = document.RootElement;

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

// Definujte textový prvek SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Definujte text, který se má zobrazit
text.TextContent = "The is a simple SVG text!";

// Nastavte různé atributy
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Přidejte text do kořenového adresáře
svgElement.AppendChild(text);

// Uložit jako SVG
document.Save(@"C:\Files\simple-text.svg");
Převést-Text-na-SVG-pomocí-CSharp

Převeďte text na SVG pomocí C#.

Níže naleznete obsah obrázku 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>

Převeďte text pomocí TSpan na SVG v C#

Element SVG definuje podtext v elementu . Do SVG můžeme přidat libovolný text s prvkem tspan podle následujících kroků:

  1. Nejprve vytvořte instanci třídy SVGDocument.
  2. Dále získejte kořenový prvek dokumentu.
  3. Poté vytvořte objekt třídy SVGTextElement.
  4. Volitelně nastavte různé atributy pomocí metody SetAttribute().
  5. Dále definujte objekt SVGTSpanElement.
  6. Poté nastavte jeho atributy pomocí metody SetAttribute().
  7. Nyní zavolejte metodu AppendChild() a připojte ji k prvku SVGTextElement.
  8. Chcete-li přidat další objekty SVGTSpanElement, opakujte výše uvedené kroky.
  9. Poté zavolejte metodu AppendChild() pro připojení SVGTextElement ke kořenovému prvku.
  10. Nakonec uložte výstupní obraz SVG pomocí metody Save().

Následující ukázka kódu ukazuje, jak převést text pomocí tspan na SVG v C#.

// Tento příklad kódu ukazuje, jak přidat text pomocí tspan do SVG.
var document = new SVGDocument();

// Získejte kořenový prvek svg dokumentu
var svgElement = document.RootElement;

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

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

// prvek SVG TSpan
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");

// Připojit k SVG Text
text.AppendChild(tspan1);

// Další prvek TSpan
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");

// Připojit k textu SVG
text.AppendChild(tspan2);

// Přidejte text SVG do kořenového adresáře
svgElement.AppendChild(text);

// Uložte SVG
document.Save(@"C:\Files\svg-tSpan.svg");
SVG-Text-with-tspan-in-CSharp

Převeďte text pomocí tspan na SVG v C#.

Níže naleznete obsah obrázku 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>

Text SVG s TextPath v C#

Můžeme také vykreslit text podél tvaru prvku a uzavřít text do prvku . Umožňuje nastavení odkazu na element pomocí atributu href. Text můžeme převést pomocí textových cest podle následujících kroků:

  1. Nejprve vytvořte instanci třídy SVGDocument.
  2. Dále získejte kořenový prvek dokumentu.
  3. Poté vytvořte objekt třídy SVGPathElement a nastavte různé atributy pomocí metody SetAttribute().
  4. Poté zavolejte metodu AppendChild() a připojte ji ke kořenovému prvku.
  5. Dále vytvořte objekt třídy SVGTextElement.
  6. Poté inicializujte objekt SVGTextPathElement a nastavte obsah textu.
  7. Dále přiřaďte SVGPathElement jeho atributu href pomocí metody SetAttribute().
  8. Potom zavolejte metodu AppendChild() pro připojení SVGTextPathElement k prvku SVGTextElement.
  9. Poté připojte SVGTextElement ke kořenovému prvku pomocí metody AppendChild().
  10. Nakonec uložte výstupní obraz SVG pomocí metody Save().

Následující ukázka kódu ukazuje, jak převést text pomocí textPath na SVG v C#.

// Tento příklad kódu ukazuje, jak přidat text pomocí textPath do SVG.
var document = new SVGDocument();

// Získejte kořenový prvek svg dokumentu
var svgElement = document.RootElement;

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

// Prvek cesty SVG
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");

// Připojte cestu SVG ke kořenovému prvku
svgElement.AppendChild(path1);

// Another Prvek cesty SVG
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");

// Připojte cestu SVG ke kořenovému prvku
svgElement.AppendChild(path2);

// Textový prvek SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Vytvořte prvek SVG Text Path
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");

// Připojte textovou cestu SVG k textu SVG
text.AppendChild(textPath1);

// Další prvek SVG Text Path
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");

// Připojte textovou cestu SVG k textu SVG
text.AppendChild(textPath2);

// Přidejte text SVG do kořenového adresáře
svgElement.AppendChild(text);

// Uložte SVG
document.Save(@"C:\Files\svg-textPath.svg");
SVG-Text-with-textPath-in-CSharp

Převeďte text s textPath na SVG v C#.

Níže naleznete obsah obrázku 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>

Použít styl textu SVG v C#

Do SVG můžeme přidat libovolný text podle následujících kroků:

  1. Nejprve vytvořte instanci třídy SVGDocument.
  2. Dále získejte kořenový prvek dokumentu.
  3. Poté vytvořte objekt třídy SVGTextElement.
  4. Dále nastavte atribut stylu pomocí metody SetAttribute().
  5. Poté zavolejte metodu AppendChild() a připojte ji ke kořenovému prvku.
  6. Nakonec uložte výstupní obraz SVG pomocí metody Save().

Následující ukázka kódu ukazuje, jak aplikovat styly CSS na text SVG v C#.

// Tento příklad kódu ukazuje, jak přidat text do SVG a použít atributy stylu CSS.
var document = new SVGDocument();

// Získejte kořenový prvek svg dokumentu
var svgElement = document.RootElement;

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

// Definujte prvek SVG Text
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Definujte text, který se má zobrazit
text.TextContent = "The is a simple SVG text!";

// Nastavte různé atributy
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Použít styl
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// Přidejte text do kořenového adresáře
svgElement.AppendChild(text);

// Uložit jako SVG
document.Save(@"C:\Files\text-style.svg");
Použít-SVG-Text-Style-v-CSharp

Použijte styl textu SVG v C#.

Níže naleznete obsah obrázku 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>

Získejte bezplatnou dočasnou licenci

Můžete získat bezplatnou dočasnou licenci a vyzkoušet Aspose.SVG pro .NET bez omezení hodnocení.

Závěr

V tomto článku jsme se naučili, jak:

  • vytvořit nový obrázek SVG;
  • používat textové prvky SVG;
  • vykreslit text SVG do cesty;
  • nastavit atributy pozice a výplně pro text SVG;
  • nastavit atributy stylu pro text SVG v C#.

Kromě převodu textu na SVG v C# se můžete dozvědět více o Aspose.SVG pro .NET v dokumentaci a prozkoumat různé funkce podporované rozhraním API. V případě jakýchkoliv nejasností nás neváhejte kontaktovat na našem bezplatném fóru podpory.

Viz také