המרת טקסט ל-SVG ב-C#

רכיב הטקסט SVG משמש להגדרת טקסט ב-SVG. SVG (Scalable Vector Graphics) הוא פורמט קובץ וקטור ידידותי לאינטרנט. הוא משמש להצגת מידע חזותי בדף אינטרנט. אנחנו יכולים בקלות לכתוב כל טקסט ב-SVG באמצעות אלמנט SVG Text. במאמר זה נלמד כיצד להמיר טקסט ל-SVG ב-C#.

הנושאים הבאים יכוסו במאמר זה:

  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’. אנו יכולים להגדיר מאפיינים/מאפיינים שונים עבור רכיבי SVG באמצעות שיטת SetAttribute(string, string). השיטה AppendChild(Node) של ה-API מוסיפה את הילד החדש של הצומת לסוף רשימת הילדים של ה-node הזה.

אנא הורד את ה-DLL של ה-API או התקן אותו באמצעות NuGet.

PM> Install-Package Aspose.SVG

מהו טקסט SVG?

ב-SVG, הטקסט מוצג באמצעות האלמנט . כברירת מחדל, הטקסט מוצג במילוי שחור וללא קווי מתאר. אנו יכולים להגדיר את התכונות הבאות:

  • x: קובע את מיקום הנקודה בצורה אופקית.
  • y: קובע את מיקום הנקודה בצורה אנכית.
  • מילוי: מגדיר את צבע הטקסט המעובד.
  • טרנספורמציה: סובב, תרגם, הטיה וקנה מידה.

המרת טקסט ל-SVG באמצעות C#

אנו יכולים להוסיף כל טקסט ל-SVG על ידי ביצוע השלבים המפורטים להלן:

  1. ראשית, צור מופע של המחלקה SVGDocument.
  2. לאחר מכן, קבל את אלמנט השורש של המסמך.
  3. לאחר מכן, צור את אובייקט המחלקה SVGTextElement.
  4. לאחר מכן, הגדר תכונות שונות באמצעות שיטת SetAttribute() .
  5. לאחר מכן, קרא למתודה AppendChild() כדי לצרף אותה לאלמנט השורש.
  6. לבסוף, שמור את תמונת הפלט SVG באמצעות שיטת Save() .

דוגמת הקוד הבאה מראה כיצד להמיר טקסט ל-SVG ב-C#.

// דוגמה זו מדגימה כיצד להוסיף טקסט ל-SVG.
var document = new SVGDocument();

// קבל רכיב svg root של המסמך
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 ב-C#

האלמנט 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 ב-C#.

// דוגמה זו מדגימה כיצד להוסיף טקסט עם tspan ל-SVG.
var document = new SVGDocument();

// קבל רכיב svg root של המסמך
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 ב-C#.

מצא למטה את התוכן של תמונת 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 ב-C#

אנחנו יכולים גם לעבד טקסט לאורך הצורה של אלמנט , ולכלול את הטקסט באלמנט . זה מאפשר להגדיר הפניה לאלמנט באמצעות תכונת href. אנו יכולים להמיר טקסט עם נתיבי טקסט על ידי ביצוע השלבים המפורטים להלן:

  1. ראשית, צור מופע של המחלקה SVGDocument.
  2. לאחר מכן, קבל את אלמנט השורש של המסמך.
  3. לאחר מכן, צור את אובייקט המחלקה SVGPathElement והגדר תכונות שונות באמצעות שיטת SetAttribute() .
  4. לאחר מכן, קרא למתודה AppendChild() כדי לצרף אותה לאלמנט השורש.
  5. לאחר מכן, צור את אובייקט המחלקה SVGTextElement.
  6. לאחר מכן, אתחול האובייקט SVGTextPathElement והגדר תוכן טקסט.
  7. לאחר מכן, הקצה את SVGPathElement לתכונת href שלו באמצעות שיטת SetAttribute() .
  8. לאחר מכן, קרא למתודה AppendChild() כדי להוסיף SVGTextPathElement לאלמנט SVGTextElement.
  9. לאחר מכן, הוסף SVGTextElement לאלמנט השורש באמצעות שיטת AppendChild() .
  10. לבסוף, שמור את תמונת הפלט SVG בשיטת Save() .

דוגמת הקוד הבאה מראה כיצד להמיר טקסט עם textPath ל-SVG ב-C#.

// דוגמה זו מדגימה כיצד להוסיף טקסט עם textPath ל-SVG.
var document = new SVGDocument();

// קבל רכיב svg root של המסמך
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 Text Path
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
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 ב-C#.

מצא למטה את התוכן של תמונת 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 ב-C#

אנו יכולים להוסיף כל טקסט ל-SVG על ידי ביצוע השלבים המפורטים להלן:

  1. ראשית, צור מופע של המחלקה SVGDocument.
  2. לאחר מכן, קבל את אלמנט השורש של המסמך.
  3. לאחר מכן, צור את אובייקט המחלקה SVGTextElement.
  4. לאחר מכן, הגדר את תכונת הסגנון באמצעות שיטת SetAttribute() .
  5. לאחר מכן, קרא למתודה AppendChild() כדי לצרף אותה לאלמנט השורש.
  6. לבסוף, שמור את תמונת הפלט SVG באמצעות שיטת Save() .

דוגמת הקוד הבאה מראה כיצד להחיל סגנונות CSS על טקסט SVG ב-C#.

// דוגמה זו מדגימה כיצד להוסיף טקסט ל-SVG ולהחיל תכונות בסגנון CSS.
var document = new SVGDocument();

// קבל רכיב svg root של המסמך
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 ב-C#.

מצא למטה את התוכן של תמונת 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 עבור .NET ללא מגבלות הערכה.

סיכום

במאמר זה למדנו כיצד:

  • צור תמונת SVG חדשה;
  • השתמש ברכיבי טקסט SVG;
  • עיבוד טקסט SVG לנתיב;
  • הגדר תכונות מיקום ומילוי עבור טקסט SVG;
  • הגדר תכונות סגנון עבור טקסט SVG ב-C#.

מלבד המרת טקסט ל-SVG ב-C#, אתה יכול ללמוד עוד על Aspose.SVG עבור .NET בתיעוד ולחקור תכונות שונות הנתמכות על ידי ה-API. בכל מקרה של אי בהירות, אנא אל תהסס לפנות אלינו בפורום התמיכה החינמית שלנו.

ראה גם