ویژگی Fill در SVG

در مطالب قبل از ویژگی fill در مثال ها استفاده کردیم در این مطلب این ویژگی را بصورت کامل بررسی می کنیم.

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

ویژگی fill

ویژگی fill یک رنگ می پذیرد و با استفاده از آن رنگ داخل یک شکل را پر می کند. (Fill یعنی پر کردن)

در مثال زیر داخل شکل مستطیل و دایره را رنگ می زنیم:

<rect class="rectangle" width="100%" height="100%" fill="red" />

<circle class="circle" cx="150" cy="150" r="100" fill="#yellow" />

همچنین می توانیم این ویژگی را در CSS مقدار دهی کنیم:

.rectangle {
  fill: red;
}

.circle {
  fill: #039;
}

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

مقدار پیشفرض ویژگی fill رنگ سیاه می باشد پس اگر می خواهیم داخل شکل هیچ رنگی نباشد باید برای ویژگی fill مقدار none را ثبت کنیم:

<rect width="100%" height="100%" fill="none" />

ویژگی fill-opacity

با استفاده از ویژگی fill-opacity می توان رنگ داخلی را نیمه شفاف کرد این ویژگی کاملا شبیه به ویژگی opacity در سی اس اس کار می کند و یک عدد بین 0 و 1 می گیرد که هر چه عدد به 0 نزدیک تر باشد رنگ پر شده شفاف تر است.

<circle cx="50" cy="50" r="25" style="stroke: none; fill: #0000ff; fill-opacity: 0.3;"></circle>
<circle cx="120" cy="50" r="25" style="stroke: none; fill: #0000ff; fill-opacity: 0.7;"></circle>

همانطور که مشاهده می کنید این بار این ویژگی را در سی اس اس اعمال کرده ایم. اما می توانیم مستقیم به خود تگ circle این ویژگی را نیز بدهیم:

<circle cx="50" cy="50" r="25" fill-opacity="0.3"></circle>

ویژگی fill-rule

وقتی با یک دایره یا یک مستطیل کار می کنیم به دلیل سادگی این اشکال محیط داخل و خارج آنها واضح است و می دانیم که قسمت داخلی کدام است و همان قسمت نیز باید توسط ویژگی fill رنگ شود. اما در اشکال پیچیده تر تشخیص محیط داخل و خارج شکل کار پیچیده ای است، از این رو به ویژگی fill-rule نیاز داریم که با استفاده از الگوریتم هایی که ارایه می دهد قسمت داخلی شکل را مشخص می کند.

این ویژگی سه مقدار nonzero, evenodd و inherit را می پذیرد:

nonzero

الگوریتم nonzero برای تشخیص اینکه یک نقطه خارج شکل یا داخل شکل است به این شرح است:

نقطه مورد سوال در یک مکان دلخواه در نظر گرفته می شود از آن نقطه به تمام جهات یک خط بی نهایت رسم می شود، برای هرباری که یک مسیر از شکل از خط مذکور رد شود اگر مسیر در جهت عقربه های ساعت رسم شده باشد یک عدد به یک شمارنده اضافه می شود و اگر مسیر در جهت عکس عقربه های ساعت باشد یک عدد از شمارنده کم می شود. در نهایت اگر شمارنده صفر باشد نقطه دلخواه بیرون از شکل تلقی می شود و اگر عدد شمارنده چیزی غیر از صفر باشد نقطه درون شکل در نظر گرفته می شود.

 

 

در مثال زیر ستاره و خورشید هر دو با مسیرهایی در جهت عقربه های ساعت رسم شده اند و مقدار ویژگی fill-rule آنها nonzero می باشد:

 

See the Pen SVG clockwise nonzero fill-rule Example by Mojtaba Seyedi (@seyedi) on CodePen.

 

evenodd

الگوریتم evenodd برای تشخیص اینکه یک نقطه خارج شکل یا داخل شکل است به این شرح است:

از نقطه دلخواه به تمام جهات یک خط بی نهایت رسم می شود، برای هرباری که یک مسیر از شکل از خط مذکور رد شود، یک عدد به شمارنده اضافه می شود در نهایت اگر شمارنده عدد زوج باشد نقطه مورد نظر بیرون از شکل است و اگر عدد فرد باشد نقطه درون شکل می باشد.

در مثال زیر ستاره و خورشید هر دو با مسیرهایی در جهت عقربه های ساعت رسم شده اند و مقدار ویژگی fill-rule آنها evenodd می باشد:

 

See the Pen SVG clockwise evenodd fill-rule Example by Mojtaba Seyedi (@seyedi) on CodePen.

 

inherit

مقدار inherit برای ویژگی fill-rule باعث می شود تا عنصر مقدار تعیین شده برای ویژگی مربوط به پدرش را ارث ببرد.