C# kullanarak SVG'de Doldurma ve Konturlama

SVG (Ölçeklenebilir Vektör Grafikleri), XML tabanlı, web dostu bir vektör dosyası biçimidir. Bir web sayfasında görsel bilgileri görüntülemek için kullanılır. SVG görüntüleri, görüntünün kalitesini değiştirmeden ölçeklenebilir. Bu yazıda, C# kullanarak SVG’de dolgu ve kontur ile nasıl çalışılacağını öğreneceğiz.

Bu yazıda aşağıdaki konular ele alınacaktır:

1. SVG’de Doldurmak ve Konturlamak için C# API’sı
2. SVG Dolgusu nedir
3. SVG Darbesi Nedir
4. SVG’de Vuruşlar ve Dolgular
5. SVG’de Daireyi Doldurun ve Konturlayın
6. SVG’de Yolu Doldurun ve Konturlayın
7. Stil Kullanarak Dolgu ve Kontur Uygulayın

SVG’de Doldurmak ve Konturlamak için C# API’si

C# dilinde SVG’nin dolgu ve kontur nitelikleriyle çalışmak için Aspose.SVG for .NET API’sini kullanacağız. Herhangi bir yazılım bağımlılığı olmadan SVG dosyalarının yüklenmesine, ayrıştırılmasına, işlenmesine, oluşturulmasına ve popüler biçimlere dönüştürülmesine olanak tanır.

API’nin SVGDocument sınıfı, SVG hiyerarşisinin kökünü temsil eder ve tüm içeriği tutar. Bu sınıfın Save() yöntemi, SVG’nin belirtilen dosya yoluna kaydedilmesine izin verir. QuerySelector() yöntemi, belgede seçiciyle eşleşen ilk öğeyi döndürür. API, dikdörtgenler, daireler, elipsler, Çizgi, sürekli çizgiler vb. gibi popüler şekillerle çalışmayı destekler. API, bu desteklenen şekilleri temsil etmek için daire için SVGCircleElement, çokgen için SVGPolygonElement vb. gibi ayrı sınıflar sağlar.

Lütfen API’nin [DLL’sini 15 indirin] veya NuGet kullanarak kurun.

PM> Install-Package Aspose.SVG

SVG Doldurma nedir?

Fill özelliği, şeklin anahattı içindeki rengini ayarlamak için kullanılan temel SVG sunum niteliklerinden biridir.

Aşağıdaki dolgu niteliklerini tanımlayabiliriz:

• dolgu: Doldurulacak rengi ayarlar. Hiçbiri veya dolgu yoksa saydam olarak belirtin.
• fill-opacity: Opaklık değerini 0 ile 1 arasında ayarlar.
• fill-rule: Bir şeklin iç alanının sıfır olmayan, çift tek gibi nasıl belirlendiğini tanımlar.

SVG Darbesi nedir?

Strok özelliği, SVG şekillerinin dış hatlarını veya kenarlığını tanımlar. Kontur sunum özelliği, şeklin dış hattının rengini ayarlar.

Aşağıdaki kontur niteliklerini ayarlayabiliriz:

• kontur: Renk değerini ayarlar.
• stroke-dasharray: Kesikli çizgi türlerini belirtir.
• inme-dashoffset
• stroke-linecap: Alın, kare ve yuvarlak gibi çizgi uçlarının şeklini kontrol eder.
• stroke-linejoin: Gönye, eğim ve yuvarlak gibi iki çizginin nasıl birleştirileceğini belirtir.
• Strok-miterlimit: Kullanılıyorsa 1’den büyük veya ona eşit olmalıdır.
• Stroke-opacity: Opaklık değerini 0 ile 1 arasında ayarlar.
• vuruş genişliği: Genişliği ayarlar.

SVG’de Dolgular ve Konturlar

Hem dolgu hem de kontur, SVG’de grafiklere renk, degradeler veya desenler eklemek için kullanılır. Dolgu, SVG öğesinin içini boyarken, kontur dış hatlarını çizer. Stil özelliğinde hem dolgu hem de kontur belirtebilir veya bunları sunum nitelikleri olarak kullanabiliriz.

Stil özelliğinde SVG dolgularını ve SVG vuruşlarını aşağıda gösterildiği gibi ayarlayabiliriz:

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

Aşağıda gösterildiği gibi aynı stil özelliklerini sunum niteliklerinde de kullanabiliriz:

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

SVG rengini belirtmek için kırmızı, mavi vb. renk isimlerini kullanabiliriz. Renkler için ayrıca RGB değerleri veya HEX değerleri kullanabiliriz.

C#’ta Daireyi Doldur ve Konturla

Aşağıda verilen adımları izleyerek bir daire için SVG dolgu ve SVG kontur özelliklerini ayarlayabiliriz:

1. Öncelikle, SVGDocument sınıfını kullanarak mevcut bir SVG’yi yükleyin.
2. Ardından, belgenin kök öğesini alın.
3. Ardından, QuerySelectorAll() yöntemini kullanarak tüm daire öğelerini bulun.
4. Bundan sonra, seçilen SVGCircleElement için dolgu niteliklerini ayarlayın.
5. İsteğe bağlı olarak, seçilen SVGCircleElement için kontur niteliklerini ayarlayın.
6. Son olarak, çıktı SVG görüntüsünü Save() yöntemini kullanarak kaydedin.

Aşağıdaki kod örneği, C# dilinde SVG’nin daire öğesi için dolgu ve konturun nasıl ayarlanacağını gösterir.

// Bu kod örneği, C# dilinde SVG'nin bir daire öğesi için dolgu ve kontur niteliklerinin nasıl ayarlanacağını gösterir.
// Mevcut bir SVG görüntüsünü yükleyin
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Belgenin kök SVG öğesini alın
var svgElement = document.RootElement;

// g öğesindeki tüm daire öğelerini bulun
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// İlk daire öğesini al
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Dolgu niteliklerini ayarla
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Kontur niteliklerini ayarla
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

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

Lütfen Circle.svg görüntüsünün içeriğini aşağıda bulabilirsiniz.

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

İşte Fill-Circle.svg görüntüsünün içeriği.

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

C#’ta Yolu Doldur ve Konturla

Aşağıda verilen adımları izleyerek SVG’deki bir yol öğesi için SVG dolgu ve SVG kontur özelliklerini ayarlayabiliriz:

1. Öncelikle, SVGDocument sınıfını kullanarak mevcut bir SVG’yi yükleyin.
2. Ardından, belgenin kök öğesini alın.
3. Ardından, QuerySelector() yöntemini kullanarak yol öğesini alın.
4. Bundan sonra, seçilen SVGPathElement için dolgu niteliklerini ayarlayın.
5. İsteğe bağlı olarak, seçilen SVGPathElement için kontur niteliklerini ayarlayın.
6. Son olarak, çıktı SVG görüntüsünü Save() yöntemini kullanarak kaydedin.

Aşağıdaki kod örneği, C# dilinde SVG’nin bir yol öğesi için dolgu ve konturun nasıl ayarlanacağını gösterir.

// Bu kod örneği, C# dilinde SVG'nin bir yol öğesi için dolgu ve kontur niteliklerinin nasıl ayarlanacağını gösterir.
// Mevcut bir SVG görüntüsünü yükleyin
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Belgenin kök SVG öğesini alın
var svgElement = document.RootElement;

// İlk yol öğesini al
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Dolgu niteliklerini ayarla
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Kontur niteliklerini ayarla
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

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

Lütfen Sample-Path.svg görüntüsünün içeriğini aşağıda bulabilirsiniz.

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

Lütfen Fill-Path.svg görüntüsünün içeriğini aşağıda bulabilirsiniz.

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

C#’ta Stil kullanarak Dolgu ve Kontur uygulayın

Ayrıca aşağıda verilen adımları takip ederek CSS stili özniteliğini kullanarak SVG dolgu ve SVG kontur özelliklerini uygulayabiliriz:

1. İlk olarak, SVGDocument sınıfının bir örneğini oluşturun.
2. Ardından, belgenin kök öğesini alın.
3. Ardından, CreateElementNS() yöntemini kullanarak bir daire öğesi oluşturun.
4. Ardından, dairenin Cx, Cy ve R gibi temel özelliklerini ayarlayın.
5. Ardından, SetAttribute() yöntemini kullanarak style niteliğini uygulayın.
6. Bundan sonra, AppendChild() yöntemini kullanarak çocuğu ekleyin.
7. Son olarak, çıktı SVG görüntüsünü Save() yöntemini kullanarak kaydedin.

Aşağıdaki kod örneği, C#’ta CSS stili kullanılarak dolgu ve konturun nasıl uygulanacağını gösterir.

// Bu kod örneği, C#'ta CSS stili kullanılarak dolgu ve kontur niteliklerinin nasıl uygulanacağını gösterir.
// Yeni bir SVG oluştur
using (var document = new SVGDocument())
{
    // Belgenin kök SVG öğesini alın
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Çevre Ekle
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Stil niteliğini ayarla
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Kök öğeye daire ekle
    svgElement.AppendChild(circle);
    
    // SVG'yi kaydedin
    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>

Ücretsiz Geçici Lisans Alın

Aspose.SVG for .NET’i değerlendirme sınırlamaları olmaksızın denemek için ücretsiz bir geçici lisans alabilirsiniz.

Çözüm

Bu makalede, şunların nasıl yapılacağını öğrendik:

• yeni bir SVG görüntüsü oluşturun;
• mevcut bir SVG görüntüsünü yükleyin;
• bir SVG görüntüsünü düzenleyin;
• SVG şekilleri için dolgu ve kontur niteliklerini ayarlayın;
• C#‘daki şekiller için stil niteliklerini ayarlayın.

Ayrıca dokümantasyonda Aspose.SVG for .NET hakkında daha fazla bilgi edinebilir ve API tarafından desteklenen farklı özellikleri keşfedebilirsiniz. Herhangi bir belirsizlik durumunda, lütfen forumumuzdan bizimle iletişime geçmekten çekinmeyin.

Ayrıca bakınız

• SVG Rengini veya Arka Planı Programlı Olarak C# ile Değiştirin