با استفاده از csharp در svg پر کنید و ضربه بزنید

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

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

  1. C# API برای پر کردن و ضربه زدن در SVG
  2. SVG Fill چیست
  3. SVG Stroke چیست
  4. SVG و پر کردن SVG
  5. پر کردن و ضربه زدن به دایره در SVG
  6. مسیر پر کردن و ضربه زدن در SVG
  7. اعمال Fill and Stroke با استفاده از Style

C# API برای پر کردن و Stroke در SVG

برای کار با ویژگی های fill و stroke SVG در سی شارپ، از 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 چیست؟

ویژگی fill یکی از ویژگی های اصلی ارائه SVG است که برای تنظیم رنگ شکل در طرح کلی آن استفاده می شود.

ما می توانیم ویژگی های fill زیر را تعریف کنیم:

  • fill: رنگ را برای پر کردن تنظیم می کند. در صورت عدم وجود پر کردن، هیچ یا شفاف را مشخص کنید.
  • fill-opacity: مقدار opacity را بین 0 تا 1 تنظیم می کند.
  • Fill-rule: نحوه تعیین سطح داخلی یک شکل مانند غیر صفر، زوج را مشخص می کند.

SVG Stroke چیست؟

ویژگی stroke خطوط کلی یا مرزی از اشکال SVG را مشخص می کند. ویژگی stroke presentation رنگ طرح کلی شکل را تعیین می کند.

ما می توانیم ویژگی های stroke زیر را تنظیم کنیم:

  • stroke: مقدار رنگ را تنظیم می کند.
  • stroke-dasharray: انواع خطوط چین را مشخص می کند.
  • stroke-dashoffset
  • stroke-linecap: شکل انتهای خطوط مانند لب به لب، مربع و گرد را کنترل می کند.
  • stroke-linejoin: نحوه اتصال دو خط مانند میتر، مخروطی و گرد را مشخص می کند.
  • stroke-miterlimit: در صورت استفاده باید بزرگتر یا مساوی 1 باشد.
  • stroke-opacity: مقدار opacity را بین 0 تا 1 تنظیم می کند.
  • stroke-width: عرض را تنظیم می کند.

پر کردن و ضربه زدن در SVG

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

ما می توانیم SVG fills و SVG strokes را در ویژگی style مانند شکل زیر تنظیم کنیم:

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

همچنین می‌توانیم از همان ویژگی‌های سبک در ویژگی‌های ارائه استفاده کنیم که در زیر نشان داده شده است:

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

برای تعیین رنگ SVG می توانیم از نام رنگ ها مانند قرمز، آبی و … استفاده کنیم. همچنین می توانیم از مقادیر RGB یا مقادیر HEX برای رنگ ها استفاده کنیم.

دایره را در سی شارپ پر کنید و بکشید

با دنبال کردن مراحل زیر می‌توانیم ویژگی‌های SVG fill و SVG stroke را برای یک دایره تنظیم کنیم:

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

نمونه کد زیر نحوه تنظیم fill و stroke را برای عنصر دایره ای SVG در C# نشان می دهد.

// این مثال کد نحوه تنظیم ویژگی های fill و stroke را برای یک عنصر دایره ای 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;

// صفات fill را تنظیم کنید
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");
Fill-and-Stroke-Circle-in-CSharp

Fill و stroke را برای عنصر دایره در سی شارپ تنظیم کنید.

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

مسیر پر کردن و ضربه زدن در سی شارپ

با دنبال کردن مراحل زیر می‌توانیم ویژگی‌های SVG fill و SVG stroke را برای یک عنصر مسیر در SVG تنظیم کنیم:

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

نمونه کد زیر نحوه تنظیم fill و stroke را برای عنصر مسیر SVG در C# نشان می دهد.

// این مثال کد نحوه تنظیم ویژگی های fill و stroke را برای عنصر مسیر 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;

// صفات fill را تنظیم کنید
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");
Fill-and-Stroke-Path-in-CSharp

Fill و stroke را برای عنصر مسیر در سی شارپ تنظیم کنید.

لطفاً محتوای تصویر 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 و Stroke با استفاده از Style در سی شارپ

همچنین می‌توانیم ویژگی‌های SVG fill و SVG stroke را با استفاده از ویژگی CSS style با دنبال کردن مراحل زیر اعمال کنیم:

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

نمونه کد زیر نحوه اعمال fill و stroke را با استفاده از سبک CSS در C# نشان می دهد.

// این مثال کد نحوه اعمال ویژگی های fill و stroke را با استفاده از سبک 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");
}
Apply-Fill-and-Stroke-using-Style-in-CSharp

فیل و استروک را با استفاده از سبک CSS اعمال کنید

<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 برای دات نت بدون محدودیت ارزیابی، می توانید یک مجوز موقت رایگان دریافت کنید.

نتیجه

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

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

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

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