خصائص fill لـ SVG

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

مثال على الملء

ملء الشكل في SVG هو الملء داخل هالة الشكل. هذا مثال على ملء SVG:

<svg width="500" height="100"><circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: none; fill: #0000ff;" </svg>

هذا المثال يعرف دائرة ملونة بلون أزرق (#0000ff) بدون لون رسم. إليك الصورة المولدة:

مثال على الرسم ولون الملء

يمكنك جمع لون الرسم ولون الملء في شكل SVG. هذا مثال على الرسم ولون الملء في SVG:

<svg width="500" height="100"><circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: #000066; fill: #3333ff;" </svg>

هذا المثال يستخدم لون رسم أزرق داكن (#000066) ولون ملء أزرق فاتح (#3333ff) لتحديد الدائرة. إليك الصورة المولدة:

fill-opacity

خصائص CSS fill-opacity في SVG تستخدم لضبط درجة الشفافية في لون الملء للشكل. يستخدم fill-opacity أرقام بين 0 و1. كلما قلت القيمة، زاد الشفافية. وكلما زادت القيمة، زادت الشفافية. القيمة الافتراضية هي 1، مما يعني أن لون الملء غير شفاف.

هذا مثال على SVG fill-opacity المملوءة غير الشفافة، يحتوي على دائرتين بهما fill-opacity مختلفين:

<svg width="500" height="120">
<text x="22" y="40">Text Behind Shape</text>
<circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.3; </path>
<circle cx="120" cy="50" r="25"}
　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: nonzero;
</svg>

هذا هو الصورة المولدة.

لاحظ أن النص خلف الدائرة هو أقل وضوحًا من النص خلف الدائرة. هذا بسبب أن transparense للدائرة اليمنى أعلى من الدائرة اليسرى.

fill-rule

تحدد fill-rule طريقة التعبئة للشكل المعقد. يمكن أن تأخذ fill-rule قيمتين مختلفتين . هذه القيم هي:

• nonzero

• evenodd

عادةً، هاتين القيمتين هما القاعدة التي تحدد الشكل الداخلي والخارجي للشكل. التعبئة الداخلية فقط، بالنسبة للكرة، هذا بسيط، ولكن بالنسبة للشكل المركب، هذا ليس سهلاً. انظر إلى هذا <path> مثال:

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40"
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　style="stroke: #000000;
　　　　　　　　　fill: #6666ff;
　　　　　　　　　fill-rule: nonzero;
　　　　　　
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40"
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　　　　style="stroke: #000000;
　　　　　　　　　fill: #6666ff;
　　　　　　　　　fill-rule: nonzero;
</svg>

كل من هذين مثالين للمسارات يحتويان على ثمانية خطوط، كل خط يرسم ككرة، حيث تحتوي الكرة الكبيرة على الكرة الصغيرة. في المسار الأيسر، يتم رسم الداخل الكروي من اليسار إلى اليمين (بالدوران اليساري). في المسار الأيمن، يتم رسم الداخل الكروي من اليمين إلى اليسار (بالدوران المعكوس). هذا هو الشكل الناتج عند استخدام fill-rule:non-zero

كما ترونه، يقوم القاعدة nonzero برسم زاوية الداخل المتماثلة للشكل الداخلي للكرة و شكل الداخل للكرة. القاعدة التي تحدد ما إذا كانت النقطة داخل الشكل أو خارجها هي:

رسم خط من النقطة إلى الابدية في أي اتجاه (خط شعاعي). عند مرور مسار داخل الشكل مرورًا بالشعاع، إذا كان المسار يمر بالشعاع من اليسار إلى اليمين، يتم إضافة 1 إلى المعادلة؛ إذا كان المسار يمر بالشعاع من اليمين إلى اليسار، يتم طرح 1 من المعادلة. بعد حساب جميع المسارات التي تعبر الشعاع، إذا كان إجمالي العدد صفرًا، يتم اعتبار النقطة خارج المسار. إذا كان إجمالي العدد غير صفر، يتم اعتبار النقطة داخل المسار.

هذا هو مثال نفس المسار، باستخدام fill-rule:evenodd

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40"
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　style="stroke: #000000;
　　　　　　fill: #6666ff;
　　　　　　fill-rule: evenodd;"
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40"
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　style="stroke: #000000;
　　　　　　fill: #6666ff;
　　　　　　fill-rule: evenodd;"
</svg>

تأثير الصورة بعد التنفيذ:

evenodd تعني "العدد المثلي والعدد غير المثلي". وفقًا لهذا القانون، لتحديد ما إذا كانت نقطة ما داخل شكل ما أم لا، قم بإجراء شعاع من هذه النقطة في أي اتجاه، ثم قم بفحص عدد نقاط التقاء هذا الشعاع مع مسار الشكل. قم برسم خط (شعاع) من هذه النقطة إلى الابداء. كلما مرت المسار بشعاع، يزيد عدد منحى. إذا كان مجموع العدد أثنيًا، فإن النقطة في الخارج. إذا كان مجموع العدد غير أثني، فإن النقطة داخل الشكل.