Fill dan Stroke di SVG menggunakan C#

SVG (Scalable Vector Graphics) adalah format file vektor ramah web berbasis XML. Ini digunakan untuk menampilkan informasi visual pada halaman web. Gambar SVG dapat diskalakan tanpa mengubah kualitas gambar. Pada artikel ini, kita akan belajar bagaimana bekerja dengan fill dan stroke di SVG menggunakan C#.

Topik-topik berikut akan dibahas dalam artikel ini:

1. C# API untuk Mengisi dan Memotong di SVG
2. Apa itu Isi SVG
3. Apa itu Stroke SVG
4. Stroke dan Fill dalam SVG
5. Isi dan Gores Lingkaran di SVG
6. Fill dan Stroke Path di SVG
7. Menerapkan Fill dan Stroke menggunakan Style

C# API untuk Mengisi dan Menggores di SVG

Untuk bekerja dengan atribut fill dan stroke SVG di C#, kita 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. Metode Save() dari kelas ini memungkinkan penyimpanan SVG ke jalur file yang ditentukan. Metode QuerySelector() mengembalikan elemen pertama dalam dokumen yang cocok dengan pemilih. API mendukung bekerja dengan bentuk populer seperti persegi panjang, lingkaran, elips, Garis, polyline, dll. API menyediakan kelas terpisah untuk mewakili bentuk yang didukung ini seperti SVGCircleElement untuk lingkaran, SVGPolygonElement untuk poligon, dll.

Harap unduh DLL dari API atau instal menggunakan NuGet.

PM> Install-Package Aspose.SVG

Apa itu Isi SVG?

Properti isian adalah salah satu atribut presentasi SVG dasar yang digunakan untuk mengatur warna bentuk di dalam garis besarnya.

Kita dapat menentukan atribut isian berikut:

• isi: Mengatur warna untuk diisi. Tentukan tidak ada atau transparan jika tidak ada isian.
• fill-opacity: Mengatur nilai opacity antara 0 hingga 1.
• fill-rule: Menentukan bagaimana area dalam suatu bentuk ditentukan seperti bukan nol, genap.

Apa itu Stroke SVG?

Properti stroke menentukan garis besar atau batas bentuk SVG. Atribut presentasi guratan mengatur warna garis luar bentuk.

Kita dapat mengatur atribut goresan berikut:

• stroke: Mengatur nilai warna.
• stroke-dasharray: Menentukan jenis garis putus-putus.
• stroke-dashoffset
• stroke-linecap: Mengontrol bentuk ujung garis seperti pantat, persegi, dan bulat.
• stroke-linejoin: Menentukan bagaimana dua garis bergabung seperti miter, bevel, dan round.
• stroke-miterlimit: Harus lebih besar dari atau sama dengan 1 jika digunakan.
• stroke-opacity: Mengatur nilai opacity antara 0 hingga 1.
• stroke-width: Mengatur lebar.

Isi dan Goresan di SVG

Baik isian dan coretan digunakan untuk menambahkan warna, gradien, atau pola ke grafik di SVG. Fill melukis interior elemen SVG, sedangkan stroke melukis garis luarnya. Kita dapat menentukan isian dan coretan pada atribut gaya atau menggunakannya sebagai atribut presentasi.

Kita dapat mengatur isian SVG dan coretan SVG di atribut style seperti yang ditunjukkan di bawah ini:

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

Kita juga bisa menggunakan properti gaya yang sama di atribut presentasi seperti yang ditunjukkan di bawah ini:

stroke="green" stroke-width="2" fill="#ff0000"

Untuk menentukan warna SVG, kita bisa menggunakan nama warna seperti merah, biru, dll. Kita juga bisa menggunakan nilai RGB atau nilai HEX untuk warnanya.

Isi dan Stroke Lingkaran di C

Kita dapat mengatur properti SVG fill dan stroke SVG untuk lingkaran dengan mengikuti langkah-langkah di bawah ini:

1. Pertama, muat SVG yang ada menggunakan kelas SVGDocument.
2. Selanjutnya, dapatkan elemen root dokumen.
3. Kemudian, temukan semua elemen lingkaran menggunakan metode QuerySelectorAll().
4. Setelah itu, atur atribut isian untuk SVGCircleElement yang dipilih.
5. Secara opsional, setel atribut guratan untuk SVGCircleElement yang dipilih.
6. Terakhir, simpan gambar SVG keluaran menggunakan metode Save().

Contoh kode berikut menunjukkan cara mengatur isian dan goresan untuk elemen lingkaran SVG di C#.

// Contoh kode ini mendemonstrasikan cara menyetel atribut isian dan coretan untuk elemen lingkaran SVG di C#.
// Muat gambar SVG yang ada
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

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

// Temukan semua elemen lingkaran di elemen g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Dapatkan elemen lingkaran pertama
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Tetapkan atribut isian
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Tetapkan atribut goresan
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Simpan SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

Silakan temukan di bawah konten gambar Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

Ini dia isi dari gambar Fill-Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

Fill dan Stroke Path di C#

Kita dapat mengatur properti SVG fill dan stroke SVG untuk elemen path di SVG dengan mengikuti langkah-langkah berikut ini:

1. Pertama, muat SVG yang ada menggunakan kelas SVGDocument.
2. Selanjutnya, dapatkan elemen root dokumen.
3. Kemudian, dapatkan elemen path menggunakan metode QuerySelector().
4. Setelah itu, atur atribut isian untuk SVGPathElement yang dipilih.
5. Secara opsional, setel atribut guratan untuk SVGPathElement yang dipilih.
6. Terakhir, simpan gambar SVG keluaran menggunakan metode Save().

Contoh kode berikut menunjukkan cara mengatur isian dan goresan untuk elemen jalur SVG di C#.

// Contoh kode ini mendemonstrasikan cara menyetel atribut isi dan guratan untuk elemen jalur SVG di C#.
// Muat gambar SVG yang ada
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

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

// Dapatkan elemen jalur pertama
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Tetapkan atribut isian
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Tetapkan atribut goresan
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Simpan SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

Silakan temukan di bawah konten gambar Sample-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

Silakan temukan di bawah konten gambar Fill-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

Menerapkan Fill dan Stroke menggunakan Style di C#

Kita juga dapat menerapkan properti SVG fill dan stroke SVG menggunakan atribut gaya CSS dengan mengikuti langkah-langkah berikut:

1. Pertama, buat instance kelas SVGDocument.
2. Selanjutnya, dapatkan elemen root dokumen.
3. Kemudian, buat elemen lingkaran menggunakan metode CreateElementNS().
4. Selanjutnya, atur properti dasar lingkaran seperti Cx, Cy, dan R.
5. Kemudian, terapkan atribut style menggunakan metode SetAttribute().
6. Setelah itu, tambahkan anak menggunakan metode AppendChild().
7. Terakhir, simpan gambar SVG keluaran menggunakan metode Save().

Contoh kode berikut menunjukkan cara menerapkan isian dan goresan menggunakan gaya CSS di C#.

// Contoh kode ini menunjukkan cara menerapkan atribut isian dan goresan menggunakan gaya CSS di C#.
// Buat SVG baru
using (var document = new SVGDocument())
{
    // Dapatkan elemen root SVG dari dokumen
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Tambahkan Lingkaran
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Tetapkan atribut gaya
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Tambahkan lingkaran ke elemen root
    svgElement.AppendChild(circle);
    
    // Simpan SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</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;
• memuat gambar SVG yang ada;
• edit gambar SVG;
• atur atribut isian dan coretan untuk bentuk SVG;
• atur atribut gaya untuk bentuk di C#.

Selain itu, 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 kami.

Lihat juga

• Ubah Warna SVG atau Latar Belakang Secara Terprogram di C#