تبدیل متن به SVG در سی شارپ

عنصر متن SVG برای تعریف یک متن در SVG استفاده می شود. SVG (گرافیک برداری مقیاس پذیر) یک فرمت فایل برداری وب پسند است. برای نمایش اطلاعات بصری در یک صفحه وب استفاده می شود. با استفاده از عنصر SVG Text به راحتی می توانیم هر متنی را در SVG بنویسیم. در این مقاله با نحوه تبدیل متن به SVG در سی شارپ آشنا می شویم.

موضوعات زیر در این مقاله پوشش داده خواهد شد:

  1. C# API برای تبدیل متن به SVG
  2. متن SVG چیست
  3. تبدیل متن به SVG
  4. تبدیل متن با TSpan به SVG
  5. متن SVG با TextPath
  6. اعمال سبک‌های متن SVG

C# API برای تبدیل متن به SVG

برای تبدیل متن به SVG، از Aspose.SVG for .NET API استفاده خواهیم کرد. این اجازه می دهد تا بارگیری، تجزیه، رندر، ایجاد و تبدیل فایل های SVG به [فرمت های محبوب] را بدون هیچ گونه وابستگی نرم افزاری انجام دهید.

کلاس SVGDocument API ریشه سلسله مراتب SVG را نشان می دهد و کل محتوا را در خود نگه می دارد. ما متد Save() را در این کلاس داریم که امکان ذخیره SVG را در مسیر فایل مشخص شده فراهم می کند. کلاس SVGTextElement عنصر “متن” را نشان می دهد. رابط SVGTSpanElement با عنصر ’tspan’ مطابقت دارد. API کلاس SVGTextPathElement را ارائه می‌کند که عنصر «textPath» و SVGPathElement را برای عنصر «path» نشان می‌دهد. با استفاده از روش SetAttribute(string, string) می توانیم ویژگی ها/ویژگی های مختلفی را برای عناصر SVG تنظیم کنیم. روش AppendChild(Node) API فرزند جدید گره را به انتهای لیست فرزندان این node اضافه می کند.

لطفاً یا DLL API را دانلود کنید یا با استفاده از NuGet آن را نصب کنید.

PM> Install-Package Aspose.SVG

SVG Text چیست؟

در SVG، متن با استفاده از عنصر ارائه می شود. به طور پیش فرض، متن با پر کردن سیاه و بدون طرح کلی ارائه می شود. ما می توانیم ویژگی های زیر را تعریف کنیم:

  • x: موقعیت نقطه را به صورت افقی تنظیم می کند.
  • y: موقعیت نقطه را به صورت عمودی تنظیم می کند.
  • fill: رنگ متن رندر شده را مشخص می کند.
  • تبدیل: چرخش، ترجمه، کج کردن، و مقیاس.

تبدیل متن به SVG با استفاده از C#

با دنبال کردن مراحل زیر می توانیم هر متنی را به SVG اضافه کنیم:

  1. ابتدا یک نمونه از کلاس SVGDocument ایجاد کنید.
  2. سپس عنصر ریشه سند را دریافت کنید.
  3. سپس، شی کلاس SVGTextElement را ایجاد کنید.
  4. سپس با استفاده از متد SetAttribute() ویژگی های مختلف را تنظیم کنید.
  5. پس از آن، متد AppendChild() را فراخوانی کنید تا آن را به عنصر ریشه اضافه کنید.
  6. در نهایت با استفاده از متد Save() تصویر خروجی SVG را ذخیره کنید.

نمونه کد زیر نحوه تبدیل متن به SVG در سی شارپ را نشان می دهد.

// این مثال کد نحوه اضافه کردن متن به SVG را نشان می دهد.
var document = new SVGDocument();

// عنصر root svg سند را دریافت کنید
var svgElement = document.RootElement;

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

// عنصر متن SVG را تعریف کنید
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// متنی را برای نمایش تعریف کنید
text.TextContent = "The is a simple SVG text!";

// ویژگی های مختلف را تنظیم کنید
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// متن را به ریشه اضافه کنید
svgElement.AppendChild(text);

// به عنوان SVG ذخیره کنید
document.Save(@"C:\Files\simple-text.svg");
تبدیل متن به SVG با استفاده از CSharp

تبدیل متن به SVG با استفاده از C#.

لطفاً محتوای تصویر 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>

تبدیل متن با TSpan به SVG در سی شارپ

عنصر SVG یک زیرمتن را در عنصر تعریف می کند. با دنبال کردن مراحل زیر می توانیم هر متنی با عنصر tspan به SVG اضافه کنیم:

  1. ابتدا یک نمونه از کلاس SVGDocument ایجاد کنید.
  2. سپس عنصر ریشه سند را دریافت کنید.
  3. سپس، شی کلاس SVGTextElement را ایجاد کنید.
  4. به صورت اختیاری، با استفاده از متد SetAttribute() ویژگی های مختلف را تنظیم کنید.
  5. سپس شیء SVGTSpanElement را تعریف کنید.
  6. سپس با استفاده از متد SetAttribute() ویژگی های آن را تنظیم کنید.
  7. اکنون، متد AppendChild() را فراخوانی کنید تا آن را به عنصر SVGTextElement اضافه کنید.
  8. مراحل بالا را برای اضافه کردن اشیاء SVGTSpanElement بیشتر تکرار کنید.
  9. پس از آن، متد AppendChild() را فراخوانی کنید تا SVGTextElement به عنصر ریشه اضافه شود.
  10. در نهایت تصویر SVG خروجی را با استفاده از متد Save() ذخیره کنید.

نمونه کد زیر نحوه تبدیل متن با tspan به SVG در سی شارپ را نشان می دهد.

// این مثال کد نحوه اضافه کردن متن با tspan به SVG را نشان می دهد.
var document = new SVGDocument();

// عنصر root svg سند را دریافت کنید
var svgElement = document.RootElement;

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

// عنصر متن SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");
text.SetAttribute("style", "font-family:arial");
text.SetAttribute("x", "20");
text.SetAttribute("y", "60");

// عنصر 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");

// به متن SVG اضافه کنید
text.AppendChild(tspan1);

// یکی دیگر از عناصر 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");

// به متن SVG اضافه کنید
text.AppendChild(tspan2);

// متن SVG را به روت اضافه کنید
svgElement.AppendChild(text);

// SVG را ذخیره کنید
document.Save(@"C:\Files\svg-tSpan.svg");
SVG-Text-with-tspan-in-CSharp

تبدیل متن با tspan به SVG در سی شارپ.

لطفاً محتوای تصویر 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>

متن SVG با TextPath در سی شارپ

همچنین می توانیم متن را در امتداد شکل عنصر رندر کنیم و متن را در عنصر محصور کنیم. این اجازه می دهد تا یک مرجع به عنصر با استفاده از ویژگی href تنظیم کنید. با دنبال کردن مراحل زیر می توانیم متن را با مسیرهای متنی تبدیل کنیم:

  1. ابتدا یک نمونه از کلاس SVGDocument ایجاد کنید.
  2. سپس عنصر ریشه سند را دریافت کنید.
  3. سپس، شی کلاس SVGPathElement را ایجاد کنید و با استفاده از متد SetAttribute() ویژگی های مختلف را تنظیم کنید.
  4. پس از آن، متد AppendChild() را فراخوانی کنید تا آن را به عنصر ریشه اضافه کنید.
  5. بعد، شی کلاس SVGTextElement را ایجاد کنید.
  6. سپس، شی SVGTextPathElement را مقداردهی اولیه کنید و محتوای متن را تنظیم کنید.
  7. سپس SVGPathElement را با استفاده از متد SetAttribute() به ویژگی href آن اختصاص دهید.
  8. سپس، متد AppendChild() را فراخوانی کنید تا SVGTextPathElement را به عنصر SVGTextElement اضافه کنید.
  9. پس از آن، SVGTextElement را با استفاده از متد ()AppendChild به عنصر ریشه اضافه کنید.
  10. در نهایت تصویر SVG خروجی را با استفاده از متد Save() ذخیره کنید.

نمونه کد زیر نحوه تبدیل متن با textPath به SVG در سی شارپ را نشان می دهد.

// این مثال کد نحوه اضافه کردن متن با textPath به SVG را نشان می دهد.
var document = new SVGDocument();

// عنصر root svg سند را دریافت کنید
var svgElement = document.RootElement;

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

// عنصر مسیر 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");

// مسیر SVG را به عنصر ریشه اضافه کنید
svgElement.AppendChild(path1);

// Another عنصر مسیر 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");

// مسیر SVG را به عنصر ریشه اضافه کنید
svgElement.AppendChild(path2);

// عنصر متنی SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// عنصر مسیر متنی 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");

// مسیر متن SVG را به متن SVG اضافه کنید
text.AppendChild(textPath1);

// یکی دیگر از عناصر SVG Text Path
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 را به متن SVG اضافه کنید
text.AppendChild(textPath2);

// متن SVG را به روت اضافه کنید
svgElement.AppendChild(text);

// SVG را ذخیره کنید
document.Save(@"C:\Files\svg-textPath.svg");
SVG-Text-with-textPath-in-CSharp

تبدیل متن با textPath به SVG در سی شارپ.

لطفاً محتوای تصویر 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>

استفاده از SVG Text Style در سی شارپ

با دنبال کردن مراحل زیر می توانیم هر متنی را به SVG اضافه کنیم:

  1. ابتدا یک نمونه از کلاس SVGDocument ایجاد کنید.
  2. سپس عنصر ریشه سند را دریافت کنید.
  3. سپس، شی کلاس SVGTextElement را ایجاد کنید.
  4. سپس با استفاده از متد SetAttribute() ویژگی style را تنظیم کنید.
  5. پس از آن، متد AppendChild() را فراخوانی کنید تا آن را به عنصر ریشه اضافه کنید.
  6. در نهایت با استفاده از متد Save() تصویر خروجی SVG را ذخیره کنید.

نمونه کد زیر نحوه اعمال سبک های CSS را در متن SVG در سی شارپ نشان می دهد.

// این مثال کد نحوه اضافه کردن متن به SVG و اعمال ویژگی های سبک CSS را نشان می دهد.
var document = new SVGDocument();

// عنصر root svg سند را دریافت کنید
var svgElement = document.RootElement;

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

// عنصر متنی SVG را تعریف کنید
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// متنی را برای نمایش تعریف کنید
text.TextContent = "The is a simple SVG text!";

// ویژگی های مختلف را تنظیم کنید
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// اعمال سبک
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// متن را به ریشه اضافه کنید
svgElement.AppendChild(text);

// به عنوان SVG ذخیره کنید
document.Save(@"C:\Files\text-style.svg");
Apply-SVG-Text-Style-in-CSharp

SVG Text Style را در سی شارپ اعمال کنید.

لطفاً محتوای تصویر 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>

مجوز موقت رایگان دریافت کنید

برای امتحان Aspose.SVG برای دات نت بدون محدودیت ارزیابی می توانید یک مجوز موقت رایگان دریافت کنید.

نتیجه

در این مقاله یاد گرفتیم که چگونه:

  • ایجاد یک تصویر SVG جدید؛
  • استفاده از عناصر متنی SVG.
  • رندر متن SVG به مسیر.
  • تنظیم موقعیت و ویژگی های پر برای متن SVG.
  • ویژگی های سبک را برای متن SVG در سی شارپ تنظیم کنید.

علاوه بر تبدیل متن به SVG در سی شارپ، می‌توانید درباره Aspose.SVG برای دات‌نت در مستندات اطلاعات بیشتری کسب کنید و ویژگی‌های مختلف پشتیبانی شده توسط API را بررسی کنید. در صورت وجود هرگونه ابهام، لطفاً با ما در [تالار گفتمان پشتیبانی رایگان23 تماس بگیرید.

همچنین ببینید