צבע מילוי SVG וצבע קו SVG ב-C#

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

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

1. [SVG C# API עבור SVG מילוי וצבע 2
2. מהו SVG Fill
3. מה זה SVG Stroke
4. כיצד להשתמש ב-SVG Fill ו-SVG Stroke?
5. כיצד להשתמש בצבע מילוי SVG ובצבע קו SVG
6. מילוי ולחיצת מעגל ב-SVG
7. נתיב מילוי ושטף ב-SVG
8. החל מילוי ולחיצה באמצעות סגנון

SVG C# API עבור SVG מילוי ו-Stroke Color

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

המחלקה SVGDocument של ה-API מייצגת את השורש של היררכיית ה-SVG ומחזיקה את כל התוכן. השיטה Save() של מחלקה זו מאפשרת שמירת SVG בנתיב הקובץ שצוין. השיטה QuerySelector() מחזירה את האלמנט הראשון במסמך התואם לבורר. ה-API תומך בעבודה עם צורות פופולריות כגון מלבנים, עיגולים, אליפסות, קו, פולי קווים וכו’. ה-API מספק מחלקות נפרדות לייצג צורות נתמכות אלו כגון SVGCircleElement למעגל, SVGPolygonElement למצולע וכו'.

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

PM> Install-Package Aspose.SVG

מה זה SVG Fill?

תכונת המילוי היא אחת מתכונות מצגת ה-SVG הבסיסיות המשמשות לקביעת צבע הצורה בתוך קווי המתאר שלה.

אנו יכולים להגדיר את תכונות המילוי הבאות:

• מילוי: מגדיר את הצבע למילוי. ציין אין או שקוף אם אין מילוי.
• מילוי אטימות: מגדיר את ערך האטימות בין 0 ל-1.
• fill-rule: מגדיר כיצד השטח הפנימי של צורה נקבע, כגון non-0, evenodd.

מה זה SVG Stroke?

המאפיין stroke מגדיר את קווי המתאר או הגבול של צורות SVG. תכונת הצגת הקו קובעת את צבע קווי המתאר של הצורה.

אנו יכולים להגדיר את תכונות השבץ הבאות:

• קו: קובע את ערך הצבע.
• stroke-dasharray: מציין את סוגי הקו המקווקו.
• מהלך-היסט
• stroke-linecap: שולט בצורת קצוות הקווים כגון תחת, מרובע ועגול.
• stroke-linejoin: מציין כיצד שני קווים מצטרפים כגון miter, bevel ו-round.
• stroke-miterlimit: חייב להיות גדול או שווה ל-1 אם משתמשים בו.
• שבץ-אטימות: מגדיר את ערך האטימות בין 0 ל-1.
• רוחב שבץ: קובע את הרוחב.

כיצד להשתמש ב-SVG Fill וב-SVG Stroke?

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

אנו יכולים להגדיר מילוי SVG ומשיכות SVG בתכונת הסגנון כפי שמוצג להלן:

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

אנו יכולים גם להשתמש באותם מאפייני סגנון בתכונות המצגת כפי שמוצג להלן:

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

כיצד להשתמש בצבע מילוי SVG ובצבע קו SVG

מפרט הצבע כולל מגוון כללים, כגון:

• צבע ברירת המחדל הוא שחור, אם תכונת המילוי לא צוינה.

• הצורה לא תתמלא בצבע כלשהו אם לתכונת המילוי יש ערך ללא או שקוף.

• לא יהיה קו אם תכונת הקו לא צוינה גם אם תכונת רוחב הקו צוינה.

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

• שמות צבעי SVG

מפרט SVG מגדיר 147 שמות צבעים. אנו יכולים להגדיר כל צבע על ידי ציון שמו כפי שמוצג להלן:

stroke="Green"

fill="Red"

• קודי צבע HEX

אנו יכולים גם לציין קוד צבע של שש (6) ספרות המיוצג בצורה של #RRGGBB. ישנם זוגות הקסדצימליים דו ספרתיים עבור שלושה צבעים (אדום, ירוק וכחול) עם ערכים הנעים בין 00 ל-FF. אנו יכולים להגדיר את הצבעים הירוק והאדום באמצעות ערך HEX כפי שמוצג להלן:

stroke="#00FF00"

fill="#FF0000"

• קודי צבע RGB (אדום, כחול, ירוק).

אנו יכולים לציין ערכי צבע RGB הנעים בין 0 ל-255. אנו יכולים להגדיר את ערכי צבעי ה-RGB הירוק והאדום כפי שמוצג להלן:

stroke="rgb(0,255,0)"

fill="rgb(255,0,0)"

• RGBA (אדום, כחול, ירוק, אלפא) קודי צבע

ערכי צבע RGBA הם ערכי צבע RGB המשופרים על ידי ערוץ אלפא כדי לקבוע את האטימות שלהם. זהו מספר בין 0.0 ל-1.0 שמציין שקיפות. אנו יכולים לקבל את צבעי ה-RGB הירוקים והאדומים כפי שמוצג להלן:

stroke="rgba(0,255,0,1.0)"

fill="rgba(255,0,0,1.0)"

• קודי צבע HSL

HSL ראשי תיבות של Hue, Saturation ו-Lightness. לכל צבע ב-HSL יש זווית בגלגל הצבעים RGB וכן ערך עוצמה ורוויה באחוזים. אנו יכולים לקבל קודי HSL עבור צבעים ירוקים ואדומים כפי שמוצג להלן:

stroke="hsl(120, 100%, 50%)"

fill="hsl(0, 100%, 50%)"

• HSLA (Hue, Saturation, Lightness, Alpha) צבע קודי

הוספת ערך ערוץ אלפא בערך צבע HSL מאפשרת לציין את האטימות של הצבע. אנו יכולים לקבל קודי HSLA עבור צבעים ירוקים ואדומים כפי שמוצג להלן:

 stroke="hsla(120, 100%, 50%, 1.0)"

fill="hsla(0, 100%, 50%, 1.0)"

מילוי ולחיצה במעגל ב-C#

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

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

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

// דוגמה זו מדגימה כיצד להגדיר תכונות מילוי וקו עבור רכיב מעגל של SVG ב-C#.
// טען תמונת SVG קיימת
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// קבל רכיב SVG שורש של המסמך
var svgElement = document.RootElement;

// מצא את כל רכיבי המעגל באלמנט g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// קבל את אלמנט המעגל הראשון
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// הגדר תכונות מילוי
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// הגדר תכונות שבץ
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// שמור את ה-SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

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

הנה התוכן של תמונת 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>

נתיב מילוי ושטף ב-C#

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

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

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

// דוגמה זו מדגימה כיצד להגדיר תכונות מילוי וקו עבור רכיב נתיב של SVG ב-C#.
// טען תמונת SVG קיימת
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// קבל רכיב SVG שורש של המסמך
var svgElement = document.RootElement;

// קבל את אלמנט הנתיב הראשון
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// הגדר תכונות מילוי
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// הגדר תכונות שבץ
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// שמור את ה-SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

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

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

החל SVG Fill ו-SVG Stroke באמצעות Style ב-C#

אנו יכולים גם להחיל את מאפייני מילוי SVG ו-SVG באמצעות תכונת סגנון CSS על ידי ביצוע השלבים המפורטים להלן:

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

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

// דוגמה זו מדגימה כיצד להחיל את תכונות המילוי והקו באמצעות סגנון CSS ב-C#.
// צור SVG חדש
using (var document = new SVGDocument())
{
    // קבל רכיב SVG שורש של המסמך
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // הוסף מעגל
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // הגדר מאפיין סגנון
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // הוסף עיגול לאלמנט השורש
    svgElement.AppendChild(circle);
    
    // שמור את ה-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>

קבל רישיון זמני בחינם

אתה יכול לקבל רישיון זמני בחינם לנסות את Aspose.SVG עבור .NET ללא מגבלות הערכה.

סיכום

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

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

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

ראה גם

• שנה צבע SVG או רקע באופן תכנותי ב-C#