التعبئة والحد في SVG باستخدام C#

SVG(Scalable Vector Graphics) هو تنسيق ملف متجه يعتمد على الويب يعتمد على XML. يتم استخدامه لعرض المعلومات المرئية على صفحة ويب. صور SVG قابلة للقياس بدون تغيير جودة الصورة. في هذه المقالة ، سوف نتعلم كيفية التعامل مع التعبئة والحد في SVG باستخدام C#.

سيتم تناول الموضوعات التالية في هذه المقالة:

1. C# API to Fill and Stroke in SVG
2. ما هو تعبئة SVG
3. ما هو SVG Stroke
4. ضربات وتعبئة في SVG
5. Fill and Stroke Circle in SVG
6. مسار التعبئة والضرب في SVG
7. تطبيق Fill and Stroke باستخدام النمط

C# API للتعبئة والحد في SVG

للعمل مع سمات التعبئة والحد من SVG في C# ، سنستخدم Aspose.SVG for .NET API. يسمح بتحميل ملفات SVG وتحليلها وعرضها وإنشائها وتحويلها إلى تنسيقات شائعة بدون أي تبعيات للبرامج.

تمثل فئة SVGDocument الخاصة بواجهة برمجة التطبيقات جذر تسلسل SVG الهرمي وتحمل المحتوى بأكمله. تسمح طريقة Save() لهذه الفئة بحفظ SVG إلى مسار الملف المحدد. طريقة QuerySelector() ترجع العنصر الأول في المستند الذي يطابق المحدد. تدعم واجهة برمجة التطبيقات (API) العمل مع الأشكال الشائعة مثل المستطيلات ، والدوائر ، والقطع الناقص ، والخط ، والخطوط المتعددة ، وما إلى ذلك. توفر API فئات منفصلة لتمثيل هذه الأشكال المدعومة مثل SVGCircleElement للدائرة ، و SVGPolygonElement للمضلع ، إلخ.

يرجى إما تنزيل DLL من API أو تثبيته باستخدام NuGet.

PM> Install-Package Aspose.SVG

ما هو SVG Fill؟

تعد خاصية التعبئة إحدى سمات عرض SVG الأساسية المستخدمة لتعيين لون الشكل داخل مخططه التفصيلي.

يمكننا تحديد سمات التعبئة التالية:

• تعبئة: يضبط اللون المراد تعبئته. حدد لا شيء أو شفاف إذا لم يكن هناك تعبئة.
• عتامة التعبئة: يضبط قيمة العتامة بين 0 إلى 1.
• قاعدة التعبئة: تحدد كيفية تحديد المنطقة الداخلية للشكل مثل غير صفري أو زوجي.

ما هو SVG Stroke؟

تحدد خاصية الحد المخطط التفصيلي أو حد أشكال SVG. تعيّن سمة عرض الحد لون المخطط التفصيلي للشكل.

يمكننا تعيين سمات السكتة الدماغية التالية:

• الحد: يضبط قيمة اللون.
• stroke-dasharray: يحدد أنواع الخطوط المتقطعة.
• اندفاعة السكتة الدماغية
• خط الحد: يتحكم في شكل نهايات الخطوط مثل المؤخرة والمربع والدائرية.
• ربط خط السكتة الدماغية: يحدد كيفية اتصال سطرين مثل ميتري ، مجسم مشطوف الحواف ، ودائري.
• حد السكتة الدماغية: يجب أن يكون أكبر من أو يساوي 1 إذا تم استخدامه.
• عتامة الحد: يضبط قيمة العتامة بين 0 إلى 1.
• عرض الشوط: يضبط العرض.

يملأ وضربات في SVG

يتم استخدام كل من التعبئة والحد لإضافة اللون أو التدرجات اللونية أو الأنماط إلى الرسومات في SVG. التعبئة ترسم الجزء الداخلي لعنصر SVG ، بينما ترسم الحدود حدودها الخارجية. يمكننا تحديد كل من التعبئة والحد في سمة النمط أو استخدامها كسمات للعرض التقديمي.

يمكننا تعيين تعبئة SVG وحدود SVG في سمة النمط كما هو موضح أدناه:

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

يمكننا أيضًا استخدام نفس خصائص النمط في سمات العرض كما هو موضح أدناه:

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

لتحديد لون SVG ، يمكننا استخدام أسماء الألوان مثل الأحمر والأزرق وما إلى ذلك. يمكننا أيضًا استخدام قيم RGB أو قيم HEX للألوان.

دائرة التعبئة والضرب في 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>

تطبيق Fill and Stroke باستخدام Style in C#

يمكننا أيضًا تطبيق خصائص SVG وخصائص حد SVG باستخدام سمة نمط CSS باتباع الخطوات الواردة أدناه:

1. أولاً ، قم بإنشاء مثيل لفئة SVGDocument.
2. بعد ذلك ، احصل على عنصر جذر المستند.
3. ثم قم بإنشاء عنصر دائرة باستخدام طريقة CreateElementNS().
4. بعد ذلك ، قم بتعيين الخصائص الأساسية للدائرة مثل Cx و Cy و R.
5. بعد ذلك ، قم بتطبيق سمة النمط باستخدام أسلوب SetAttribute().
6. بعد ذلك ، قم بإلحاق الطفل باستخدام طريقة AppendChild().
7. أخيرًا ، احفظ صورة SVG الناتجة باستخدام طريقة Save().

يوضح نموذج التعليمات البرمجية التالي كيفية تطبيق التعبئة والحد باستخدام نمط 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 for .NET في التوثيق واستكشاف الميزات المختلفة التي تدعمها API. في حالة وجود أي غموض ، لا تتردد في الاتصال بنا على المنتدى.

أنظر أيضا

• تغيير لون SVG أو الخلفية برمجيًا في C#