Konversikan Teks ke SVG di C#

Elemen Teks SVG digunakan untuk mendefinisikan teks dalam SVG. SVG (Scalable Vector Graphics) adalah format file vektor yang ramah web. Ini digunakan untuk menampilkan informasi visual pada halaman web. Kita dapat dengan mudah menulis teks apa pun dalam SVG menggunakan elemen Teks SVG. Pada artikel ini, kita akan mempelajari cara mengonversi teks ke SVG di C#.

Topik-topik berikut akan dibahas dalam artikel ini:

  1. C# API untuk Mengonversi Teks ke SVG
  2. Apa itu Teks SVG
  3. Konversi Teks ke SVG
  4. Konversi Teks dengan TSpan ke SVG
  5. Teks SVG dengan TextPath
  6. Terapkan Gaya Teks SVG

C# API untuk Mengonversi Teks ke SVG

Untuk mengonversi teks ke SVG, kami akan menggunakan Aspose.SVG for .NET API. Ini memungkinkan pemuatan, parsing, rendering, pembuatan, dan konversi file SVG ke format populer tanpa ketergantungan perangkat lunak apa pun.

Kelas SVGDocument API mewakili akar hierarki SVG dan menampung seluruh konten. Kami memiliki metode Save() di kelas ini yang memungkinkan penyimpanan SVG ke jalur file yang ditentukan. Kelas SVGTextElement mewakili elemen ’teks’. Antarmuka SVGTSpanElement sesuai dengan elemen ’tspan’. API menyediakan kelas SVGTextPathElement yang mewakili elemen ’textPath’ dan SVGPathElement untuk elemen ‘path’. Kita dapat mengatur berbagai properti/atribut untuk elemen SVG menggunakan metode SetAttribute(string, string). Metode AppendChild(Node) API menambahkan anak baru node ke akhir daftar anak dari node ini.

Harap unduh DLL dari API atau instal menggunakan NuGet.

PM> Install-Package Aspose.SVG

Apa itu Teks SVG?

Di SVG, teks dirender menggunakan elemen . Secara default, Teks dirender dengan isian hitam dan tanpa kerangka. Kita dapat menentukan atribut berikut:

  • x : mengatur posisi titik secara horizontal.
  • y : mengatur posisi titik secara vertikal.
  • isi: menentukan warna teks yang diberikan.
  • transform : putar, terjemahkan, condongkan, dan skala.

Konversikan Teks ke SVG menggunakan C#

Kami dapat menambahkan teks apa pun ke SVG dengan mengikuti langkah-langkah yang diberikan di bawah ini:

  1. Pertama, buat instance kelas SVGDocument.
  2. Selanjutnya, dapatkan elemen root dokumen.
  3. Kemudian, buat objek kelas SVGTextElement.
  4. Selanjutnya, atur berbagai atribut menggunakan metode SetAttribute().
  5. Setelah itu, panggil metode AppendChild() untuk menambahkannya ke elemen root.
  6. Terakhir, simpan gambar SVG keluaran menggunakan metode Save().

Contoh kode berikut menunjukkan cara mengonversi teks ke SVG di C#.

// Contoh kode ini menunjukkan cara menambahkan teks ke SVG.
var document = new SVGDocument();

// Dapatkan elemen root svg dari dokumen
var svgElement = document.RootElement;

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

// Tentukan elemen Teks SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Tentukan teks yang akan ditampilkan
text.TextContent = "The is a simple SVG text!";

// Tetapkan berbagai atribut
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Tambahkan teks ke root
svgElement.AppendChild(text);

// Simpan sebagai SVG
document.Save(@"C:\Files\simple-text.svg");
Konversi-Teks-ke-SVG-menggunakan-CSharp

Konversikan Teks ke SVG menggunakan C#.

Silakan temukan di bawah konten gambar 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>

Konversi Teks dengan TSpan ke SVG di C#

Elemen SVG mendefinisikan subteks di dalam elemen . Kita dapat menambahkan teks apa pun dengan elemen tspan ke SVG dengan mengikuti langkah-langkah berikut:

  1. Pertama, buat instance kelas SVGDocument.
  2. Selanjutnya, dapatkan elemen root dokumen.
  3. Kemudian, buat objek kelas SVGTextElement.
  4. Secara opsional, atur berbagai atribut menggunakan metode SetAttribute().
  5. Selanjutnya, tentukan objek SVGTSpanElement.
  6. Kemudian, atur atributnya menggunakan metode SetAttribute().
  7. Sekarang, panggil metode AppendChild() untuk menambahkannya ke elemen SVGTextElement.
  8. Ulangi langkah di atas untuk menambahkan lebih banyak objek SVGTSpanElement.
  9. Setelah itu, panggil metode AppendChild() untuk menambahkan SVGTextElement ke elemen root.
  10. Terakhir, simpan gambar SVG keluaran menggunakan metode Save().

Contoh kode berikut menunjukkan cara mengonversi teks dengan tspan ke SVG di C#.

// Contoh kode ini menunjukkan cara menambahkan teks dengan tspan ke SVG.
var document = new SVGDocument();

// Dapatkan elemen root svg dari dokumen
var svgElement = document.RootElement;

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

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

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

// Tambahkan ke Teks SVG
text.AppendChild(tspan1);

// Elemen TSpan lainnya
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");

// Tambahkan ke Teks SVG
text.AppendChild(tspan2);

// Tambahkan Teks SVG ke root
svgElement.AppendChild(text);

// Simpan SVG
document.Save(@"C:\Files\svg-tSpan.svg");
SVG-Teks-dengan-tspan-in-CSharp

Konversi Teks dengan tspan ke SVG di C#.

Temukan konten gambar svg-tspan.svg di bawah ini.

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

Teks SVG dengan TextPath di C#

Kita juga bisa merender teks sepanjang bentuk elemen , dan mengapit teks dalam elemen . Ini memungkinkan pengaturan referensi ke elemen menggunakan atribut href. Kami dapat mengonversi teks dengan jalur teks dengan mengikuti langkah-langkah yang diberikan di bawah ini:

  1. Pertama, buat instance kelas SVGDocument.
  2. Selanjutnya, dapatkan elemen root dokumen.
  3. Kemudian, buat objek kelas SVGPathElement dan atur berbagai atribut menggunakan metode SetAttribute().
  4. Setelah itu, panggil metode AppendChild() untuk menambahkannya ke elemen root.
  5. Selanjutnya, buat objek kelas SVGTextElement.
  6. Kemudian, inisialisasi objek SVGTextPathElement dan atur konten teks.
  7. Selanjutnya, tetapkan SVGPathElement ke atribut href-nya menggunakan metode SetAttribute().
  8. Kemudian, panggil metode AppendChild() untuk menambahkan SVGTextPathElement ke elemen SVGTextElement.
  9. Setelah itu, tambahkan SVGTextElement ke elemen root menggunakan metode AppendChild().
  10. Terakhir, simpan gambar SVG keluaran menggunakan metode Save().

Contoh kode berikut menunjukkan cara mengonversi teks dengan textPath ke SVG di C#.

// Contoh kode ini menunjukkan cara menambahkan teks dengan textPath ke SVG.
var document = new SVGDocument();

// Dapatkan elemen root svg dari dokumen
var svgElement = document.RootElement;

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

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

// Tambahkan Jalur SVG ke elemen root
svgElement.AppendChild(path1);

// Another Elemen Jalur 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");

// Tambahkan Jalur SVG ke elemen root
svgElement.AppendChild(path2);

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

// Buat elemen Jalur Teks 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");

// Tambahkan Jalur Teks SVG ke Teks SVG
text.AppendChild(textPath1);

// Elemen Jalur Teks SVG lainnya
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");

// Tambahkan Jalur Teks SVG ke Teks SVG
text.AppendChild(textPath2);

// Tambahkan Teks SVG ke root
svgElement.AppendChild(text);

// Simpan SVG
document.Save(@"C:\Files\svg-textPath.svg");
SVG-Teks-dengan-textPath-in-CSharp

Konversikan Teks dengan textPath ke SVG di C#.

Silakan temukan di bawah konten gambar 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>

Menerapkan Gaya Teks SVG di C#

Kami dapat menambahkan teks apa pun ke SVG dengan mengikuti langkah-langkah yang diberikan di bawah ini:

  1. Pertama, buat instance kelas SVGDocument.
  2. Selanjutnya, dapatkan elemen root dokumen.
  3. Kemudian, buat objek kelas SVGTextElement.
  4. Selanjutnya, atur atribut style menggunakan metode SetAttribute().
  5. Setelah itu, panggil metode AppendChild() untuk menambahkannya ke elemen root.
  6. Terakhir, simpan gambar SVG keluaran menggunakan metode Save().

Contoh kode berikut menunjukkan cara menerapkan gaya CSS ke teks SVG di C#.

// Contoh kode ini menunjukkan cara menambahkan teks ke SVG dan menerapkan atribut gaya CSS.
var document = new SVGDocument();

// Dapatkan elemen root svg dari dokumen
var svgElement = document.RootElement;

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

// Tentukan elemen Teks SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Tentukan teks yang akan ditampilkan
text.TextContent = "The is a simple SVG text!";

// Tetapkan berbagai atribut
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

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

// Tambahkan teks ke root
svgElement.AppendChild(text);

// Simpan sebagai SVG
document.Save(@"C:\Files\text-style.svg");
Terapkan-SVG-Teks-Gaya-dalam-CSharp

Menerapkan Gaya Teks SVG di C#.

Silakan temukan di bawah konten gambar 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>

Dapatkan Lisensi Sementara Gratis

Anda bisa mendapatkan lisensi sementara gratis untuk mencoba Aspose.SVG for .NET tanpa batasan evaluasi.

Kesimpulan

Dalam artikel ini, kita telah mempelajari cara:

  • buat gambar SVG baru;
  • gunakan elemen teks SVG;
  • merender teks SVG ke jalur;
  • atur posisi dan isi atribut untuk teks SVG;
  • atur atribut gaya untuk teks SVG di C#.

Selain mengonversi teks ke SVG di C#, Anda dapat mempelajari lebih lanjut tentang Aspose.SVG for .NET di dokumentasi dan menjelajahi berbagai fitur yang didukung oleh API. Jika ada ambiguitas, jangan ragu untuk menghubungi kami di forum dukungan gratis.

Lihat juga