Konwertuj tekst na SVG w C#

Element SVG Text służy do definiowania tekstu w formacie SVG. SVG (Scalable Vector Graphics) to przyjazny dla sieci format plików wektorowych. Służy do wyświetlania informacji wizualnych na stronie internetowej. Możemy łatwo napisać dowolny tekst w SVG za pomocą elementu SVG Text. W tym artykule dowiemy się, jak przekonwertować tekst na SVG w C#.

W tym artykule zostaną omówione następujące tematy:

  1. C# API do konwersji tekstu na SVG
  2. Co to jest tekst SVG
  3. Konwertuj tekst na SVG
  4. Konwertuj tekst z TSpan na SVG
  5. Tekst SVG z TextPath
  6. Zastosuj style tekstu SVG

C# API do konwersji tekstu na SVG

Aby przekonwertować tekst na SVG, użyjemy API Aspose.SVG for .NET. Umożliwia ładowanie, analizowanie, renderowanie, tworzenie i konwersję plików SVG do popularnych formatów bez żadnych zależności programowych.

Klasa SVGDocument interfejsu API reprezentuje katalog główny hierarchii SVG i przechowuje całą zawartość. Mamy w tej klasie metodę Save(), która pozwala na zapisanie SVG w określonej ścieżce pliku. Klasa SVGTextElement reprezentuje element „text”. Interfejs SVGTSpanElement odpowiada elementowi „tspan”. Interfejs API udostępnia klasę SVGTextPathElement reprezentującą element „textPath” i SVGPathElement dla elementu „ścieżka”. Możemy ustawić różne właściwości/atrybuty dla elementów SVG za pomocą metody SetAttribute(string, string). Metoda AppendChild(Node) interfejsu API dodaje nowe dziecko węzła na koniec listy dzieci tego węzła.

Proszę pobrać bibliotekę DLL interfejsu API lub zainstalować ją za pomocą NuGet.

PM> Install-Package Aspose.SVG

Co to jest tekst SVG?

W SVG tekst jest renderowany przy użyciu elementu . Domyślnie tekst jest renderowany z czarnym wypełnieniem i bez konturu. Możemy zdefiniować następujące atrybuty:

  • x: ustawia położenie punktu w poziomie.
  • y: ustawia położenie punktu w pionie.
  • fill: określa kolor renderowanego tekstu.
  • transformacja: obracanie, translacja, pochylanie i skalowanie.

Konwertuj tekst na SVG za pomocą C#

Możemy dodać dowolny tekst do SVG, wykonując poniższe czynności:

  1. Najpierw utwórz instancję klasy SVGDocument.
  2. Następnie pobierz element główny dokumentu.
  3. Następnie utwórz obiekt klasy SVGTextElement.
  4. Następnie ustaw różne atrybuty za pomocą metody SetAttribute().
  5. Następnie wywołaj metodę AppendChild(), aby dołączyć ją do elementu głównego.
  6. Na koniec zapisz wyjściowy obraz SVG za pomocą metody Save().

Poniższy przykładowy kod pokazuje, jak przekonwertować tekst na format SVG w języku C#.

// Ten przykład kodu pokazuje, jak dodać tekst do SVG.
var document = new SVGDocument();

// Pobierz główny element svg dokumentu
var svgElement = document.RootElement;

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

// Zdefiniuj element tekstowy SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Zdefiniuj tekst do pokazania
text.TextContent = "The is a simple SVG text!";

// Ustaw różne atrybuty
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Dołącz tekst do katalogu głównego
svgElement.AppendChild(text);

// Zapisz jako SVG
document.Save(@"C:\Files\simple-text.svg");
Konwertuj-tekst-do-SVG-za pomocą-CSharp

Konwertuj tekst na SVG za pomocą C#.

Poniżej znajdziesz zawartość obrazu 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>

Konwertuj tekst za pomocą TSpan na SVG w C#

Element SVG definiuje podtekst w elemencie . Możemy dodać dowolny tekst z elementem tspan do SVG, wykonując czynności podane poniżej:

  1. Najpierw utwórz instancję klasy SVGDocument.
  2. Następnie pobierz element główny dokumentu.
  3. Następnie utwórz obiekt klasy SVGTextElement.
  4. Opcjonalnie ustaw różne atrybuty za pomocą metody SetAttribute().
  5. Następnie zdefiniuj obiekt SVGTSpanElement.
  6. Następnie ustaw jego atrybuty za pomocą metody SetAttribute().
  7. Teraz wywołaj metodę AppendChild(), aby dołączyć ją do elementu SVGTextElement.
  8. Powtórz powyższe kroki, aby dodać więcej obiektów SVGTSpanElement.
  9. Następnie wywołaj metodę AppendChild() w celu dołączenia elementu SVGTextElement do elementu głównego.
  10. Na koniec zapisz wyjściowy obraz SVG za pomocą metody Save().

Poniższy przykładowy kod pokazuje, jak przekonwertować tekst z tspan na SVG w języku C#.

// Ten przykład kodu demonstruje, jak dodać tekst za pomocą tspan do SVG.
var document = new SVGDocument();

// Pobierz główny element svg dokumentu
var svgElement = document.RootElement;

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

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

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

// Dołącz do tekstu SVG
text.AppendChild(tspan1);

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

// Dołącz do tekstu SVG
text.AppendChild(tspan2);

// Dołącz tekst SVG do katalogu głównego
svgElement.AppendChild(text);

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

Konwertuj tekst za pomocą tspan na SVG w C#.

Poniżej znajduje się zawartość obrazu 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>

Tekst SVG z TextPath w C#

Możemy również renderować tekst wzdłuż kształtu elementu i umieszczać tekst w elemencie . Pozwala ustawić referencję do elementu za pomocą atrybutu href. Możemy konwertować tekst ze ścieżkami tekstowymi, wykonując czynności podane poniżej:

  1. Najpierw utwórz instancję klasy SVGDocument.
  2. Następnie pobierz element główny dokumentu.
  3. Następnie utwórz obiekt klasy SVGPathElement i ustaw różne atrybuty za pomocą metody SetAttribute().
  4. Następnie wywołaj metodę AppendChild(), aby dołączyć ją do elementu głównego.
  5. Następnie utwórz obiekt klasy SVGTextElement.
  6. Następnie zainicjuj obiekt SVGTextPathElement i ustaw zawartość tekstową.
  7. Następnie przypisz element SVGPathElement do jego atrybutu href za pomocą metody SetAttribute().
  8. Następnie wywołaj metodę AppendChild() w celu dołączenia elementu SVGTextPathElement do elementu SVGTextElement.
  9. Następnie dołącz SVGTextElement do elementu głównego za pomocą metody AppendChild().
  10. Na koniec zapisz wyjściowy obraz SVG za pomocą metody Save().

Poniższy przykładowy kod pokazuje, jak przekonwertować tekst za pomocą textPath na SVG w języku C#.

// Ten przykład kodu demonstruje, jak dodać tekst za pomocą textPath do SVG.
var document = new SVGDocument();

// Pobierz główny element svg dokumentu
var svgElement = document.RootElement;

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

// Element ścieżki 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");

// Dołącz ścieżkę SVG do elementu głównego
svgElement.AppendChild(path1);

// Another Element ścieżki 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");

// Dołącz ścieżkę SVG do elementu głównego
svgElement.AppendChild(path2);

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

// Utwórz element ścieżki tekstowej SVG
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");

// Dołącz ścieżkę tekstową SVG do tekstu SVG
text.AppendChild(textPath1);

// Kolejny element ścieżki tekstowej SVG
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");

// Dołącz ścieżkę tekstową SVG do tekstu SVG
text.AppendChild(textPath2);

// Dołącz tekst SVG do katalogu głównego
svgElement.AppendChild(text);

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

Konwertuj tekst za pomocą textPath na SVG w C#.

Poniżej znajdziesz zawartość obrazu 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>

Zastosuj styl tekstu SVG w C#

Możemy dodać dowolny tekst do SVG, wykonując poniższe czynności:

  1. Najpierw utwórz instancję klasy SVGDocument.
  2. Następnie pobierz element główny dokumentu.
  3. Następnie utwórz obiekt klasy SVGTextElement.
  4. Następnie ustaw atrybut stylu za pomocą metody SetAttribute().
  5. Następnie wywołaj metodę AppendChild(), aby dołączyć ją do elementu głównego.
  6. Na koniec zapisz wyjściowy obraz SVG za pomocą metody Save().

Poniższy przykładowy kod pokazuje, jak zastosować style CSS do tekstu SVG w języku C#.

// Ten przykład kodu demonstruje, jak dodać tekst do SVG i zastosować atrybuty stylu CSS.
var document = new SVGDocument();

// Pobierz główny element svg dokumentu
var svgElement = document.RootElement;

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

// Zdefiniuj element tekstowy SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Zdefiniuj tekst do pokazania
text.TextContent = "The is a simple SVG text!";

// Ustaw różne atrybuty
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

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

// Dołącz tekst do katalogu głównego
svgElement.AppendChild(text);

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

Zastosuj styl tekstu SVG w języku C#.

Poniżej znajduje się treść obrazu 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>

Uzyskaj bezpłatną tymczasową licencję

Możesz uzyskać bezpłatną tymczasową licencję, aby wypróbować Aspose.SVG for .NET bez ograniczeń ewaluacyjnych.

Wniosek

W tym artykule dowiedzieliśmy się, jak:

  • utwórz nowy obraz SVG;
  • używaj elementów tekstowych SVG;
  • wyrenderuj tekst SVG do ścieżki;
  • ustaw pozycję i atrybuty wypełnienia dla tekstu SVG;
  • ustaw atrybuty stylu dla tekstu SVG w C#.

Oprócz konwersji tekstu do SVG w C#, możesz dowiedzieć się więcej o Aspose.SVG for .NET w dokumentacji i poznać różne funkcje obsługiwane przez API. W przypadku jakichkolwiek niejasności prosimy o kontakt na naszym bezpłatnym forum pomocy technicznej.

Zobacz też