Metni C# ile SVG'ye Dönüştür

SVG Metin öğesi, SVG’de bir metin tanımlamak için kullanılır. SVG (Scalable Vector Graphics), web dostu bir vektör dosyası formatıdır. Bir web sayfasında görsel bilgileri görüntülemek için kullanılır. SVG Metin öğesini kullanarak SVG’de herhangi bir metni kolayca yazabiliriz. Bu yazıda, C# dilinde metni SVG’ye nasıl dönüştüreceğimizi öğreneceğiz.

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

  1. Metni SVG’ye Dönüştürmek için C# API
  2. SVG Metni Nedir
  3. Metni SVG’ye Dönüştür
  4. TSan ile Metni SVG’ye Dönüştürün
  5. TextPath ile SVG Metni
  6. SVG Metin Stillerini Uygula

Metni SVG’ye Dönüştürmek için C# API

Metni SVG’ye dönüştürmek 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ıfta, SVG’yi belirtilen dosya yoluna kaydetmeye izin veren Save() yöntemimiz var. SVGTextElement sınıfı, “metin” öğesini temsil eder. SVGTSpanElement arabirimi, “tspan” öğesine karşılık gelir. API, “textPath” öğesini temsil eden SVGTextPathElement sınıfını ve “yol” öğesi için SVGPathElement sınıfını sağlar. SetAttribute(string, string) yöntemini kullanarak SVG öğeleri için çeşitli özellikler/öznitelikler ayarlayabiliriz. API’nin AppendChild(Node) yöntemi, düğümün yeni çocuğunu bu düğümün alt öğeleri listesinin sonuna ekler.

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

PM> Install-Package Aspose.SVG

SVG Metni nedir?

SVG’de metin, öğesi kullanılarak işlenir. Varsayılan olarak, Metin siyah bir dolguyla ve dış hat olmadan oluşturulur. Aşağıdaki nitelikleri tanımlayabiliriz:

  • x: noktanın konumunu yatay olarak ayarlar.
  • y: noktanın konumunu dikey olarak ayarlar.
  • dolgu: işlenen metin rengini tanımlar.
  • transform : döndürün, tercüme edin, eğriltin ve ölçeklendirin.

C# kullanarak Metni SVG’ye Dönüştür

Aşağıda verilen adımları izleyerek herhangi bir metni SVG’ye ekleyebiliriz:

  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, SVGTextElement sınıf nesnesini oluşturun.
  4. Ardından, SetAttribute() yöntemini kullanarak çeşitli öznitelikleri ayarlayın.
  5. Bundan sonra, kök öğeye eklemek için AppendChild() yöntemini çağırın.
  6. Son olarak, çıktı SVG görüntüsünü Save() yöntemini kullanarak kaydedin.

Aşağıdaki kod örneği, C# dilinde metnin SVG’ye nasıl dönüştürüleceğini gösterir.

// Bu kod örneği, SVG'ye nasıl metin ekleneceğini gösterir.
var document = new SVGDocument();

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

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

// SVG Metin öğesini tanımlayın
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Gösterilecek metni tanımlayın
text.TextContent = "The is a simple SVG text!";

// Çeşitli öznitelikleri ayarlayın
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Metni köküne ekle
svgElement.AppendChild(text);

// SVG olarak kaydet
document.Save(@"C:\Files\simple-text.svg");
CSharp Kullanarak Metni SVG'ye Dönüştür

C# kullanarak Metni SVG’ye dönüştürün.

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

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30">The is a simple SVG text!</text>
</svg>

Metni TSpan ile C#’ta SVG’ye Dönüştürün

SVG öğesi, bir öğesi içinde bir alt metin tanımlar. Aşağıda verilen adımları izleyerek tspan öğesi olan herhangi bir metni SVG’ye ekleyebiliriz:

  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, SVGTextElement sınıf nesnesini oluşturun.
  4. İsteğe bağlı olarak, SetAttribute() yöntemini kullanarak çeşitli öznitelikleri ayarlayın.
  5. Ardından, SVGTSpanElement nesnesini tanımlayın.
  6. Ardından, SetAttribute() yöntemini kullanarak özniteliklerini ayarlayın.
  7. Şimdi, SVGTextElement öğesine eklemek için AppendChild() yöntemini çağırın.
  8. Daha fazla SVGTSpanElement nesnesi eklemek için yukarıdaki adımları tekrarlayın.
  9. Bundan sonra, kök öğeye SVGTextElement eklemek için AppendChild() yöntemini çağırın.
  10. Son olarak, çıktı SVG görüntüsünü Save() yöntemini kullanarak kaydedin.

Aşağıdaki kod örneği, C# dilinde tspan içeren metnin SVG’ye nasıl dönüştürüleceğini gösterir.

// Bu kod örneği, tspan ile SVG'ye nasıl metin ekleneceğini gösterir.
var document = new SVGDocument();

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

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

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

// SVG Tspan öğesi
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");

// SVG Metnine Ekle
text.AppendChild(tspan1);

// Başka bir Tspan öğesi
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");

// SVG Metnine Ekle
text.AppendChild(tspan2);

// Köke SVG Metni Ekle
svgElement.AppendChild(text);

// SVG'yi kaydedin
document.Save(@"C:\Files\svg-tSpan.svg");
SVG-Text-ile-tspan-in-CSharp

Metni tspan ile C# dilinde SVG’ye dönüştürün.

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

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

C#’ta TextPath ile SVG Metni

Metni bir öğesinin şekli boyunca oluşturabilir ve metni bir öğesinin içine alabiliriz. Href özniteliği kullanılarak öğesine bir referans ayarlanmasına izin verir. Aşağıda verilen adımları izleyerek metni metin yollarıyla dönüştürebiliriz:

  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, SVGPathElement sınıf nesnesini oluşturun ve SetAttribute() yöntemini kullanarak çeşitli öznitelikleri ayarlayın.
  4. Bundan sonra, kök öğeye eklemek için AppendChild() yöntemini çağırın.
  5. Ardından, SVGTextElement sınıf nesnesini oluşturun.
  6. Ardından, SVGTextPathElement nesnesini başlatın ve metin içeriğini ayarlayın.
  7. Ardından, SetAttribute() yöntemini kullanarak SVGPathElement öğesini href özniteliğine atayın.
  8. Ardından, SVGTextPathElement öğesini SVGTextElement öğesine eklemek için AppendChild() yöntemini çağırın.
  9. Bundan sonra, AppendChild() yöntemini kullanarak SVGTextElement öğesini kök öğeye ekleyin.
  10. Son olarak, çıktı SVG görüntüsünü Save() yöntemini kullanarak kaydedin.

Aşağıdaki kod örneği, C# dilinde textPath ile metnin SVG’ye nasıl dönüştürüleceğini gösterir.

// Bu kod örneği, textPath ile SVG'ye nasıl metin ekleneceğini gösterir.
var document = new SVGDocument();

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

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

// SVG Yolu öğesi
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");

// SVG Yolunu kök öğeye ekle
svgElement.AppendChild(path1);

// Another SVG Yolu öğesi
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");

// SVG Yolunu kök öğeye ekle
svgElement.AppendChild(path2);

// SVG Metin Öğesi
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// SVG Metin Yolu öğesi oluştur
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");

// SVG Metin Yolunu SVG Metnine Ekle
text.AppendChild(textPath1);

// Başka bir SVG Metin Yolu öğesi
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");

// SVG Metin Yolunu SVG Metnine Ekle
text.AppendChild(textPath2);

// Köke SVG Metni Ekle
svgElement.AppendChild(text);

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

C# dilinde textPath ile Metni SVG’ye dönüştürün.

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

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

C#’ta SVG Metin Stili Uygula

Aşağıda verilen adımları izleyerek herhangi bir metni SVG’ye ekleyebiliriz:

  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, SVGTextElement sınıf nesnesini oluşturun.
  4. Ardından, SetAttribute() yöntemini kullanarak stil niteliğini ayarlayın.
  5. Bundan sonra, kök öğeye eklemek için AppendChild() yöntemini çağırın.
  6. Son olarak, çıktı SVG görüntüsünü Save() yöntemini kullanarak kaydedin.

Aşağıdaki kod örneği, CSS stillerinin C# dilinde SVG metnine nasıl uygulanacağını gösterir.

// Bu kod örneği, SVG'ye nasıl metin ekleneceğini ve CSS stil niteliklerinin nasıl uygulanacağını gösterir.
var document = new SVGDocument();

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

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

// SVG Metin öğesini tanımlayın
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Gösterilecek metni tanımlayın
text.TextContent = "The is a simple SVG text!";

// Çeşitli öznitelikleri ayarlayın
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

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

// Metni köküne ekle
svgElement.AppendChild(text);

// SVG olarak kaydet
document.Save(@"C:\Files\text-style.svg");
CSharp'ta-SVG-Text-Style-Uygula

C#’ta SVG Metin Stili uygulayın.

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

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

Ü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ıldığını öğrendik:

  • yeni bir SVG görüntüsü oluşturun;
  • SVG metin öğelerini kullanın;
  • SVG metnini yola işleyin;
  • SVG metni için konum ve dolgu niteliklerini ayarlayın;
  • C#’ta SVG metni için stil niteliklerini ayarlayın.

Metni C# dilinde SVG’ye dönüştürmenin yanı sıra belgelerde 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 ücretsiz destek forumumuzda bizimle iletişime geçmekten çekinmeyin.

Ayrıca bakınız