مجال SVG <filter>

يستخدم عنصر <filter> لمرشح SVG لضمان تأثيرات جميلة على الصور SVG. مثل الظلال، الضباب، أو الإضاءة.

مثال مرشح

إليك مثال بسيط على مرشح SVG يعرض إثنين من الم椭圆形. لم يستخدم الellipse الأيسر مرشحًا، بينما تم تمرير الellipse الأيمن عبر مرشح ضبابي:

<svg　width="500"　height="100">
<defs>
　　　　　　<filter id="blurFilter" y="-5" height="40"
　　　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/>
　　　　　　</filter>
　　</defs>
　　　　
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke: none; fill: #0000ff; " />
　　<ellipse cx="155" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:none; fill:#0000ff; filter:url(#blurFilter);" />
</svg>

تأثير الصورة بعد التشغيل:

لاحظ كيف تكون حواف المellipse اليمنى غير واضحة.

مدخل وخرج المرشح

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

يولد مرشح SVG شكلًا من المدخل (النتيجة). عادةً ما يتم عرض هذا الناتج بدلاً من تطبيق شكل مرشح. يمكن استخدام مخرج المرشح كممدخل آخر للمرشح. لذلك، يمكن ربط المرشحات.

إليك رسم بياني يوضح مدخل وخرج مرشح SVG:

عادةً، يتم تحديد مدخل مرشح SVG في خاصية مرشح in. إليك مثال:

　<feGaussianBlur stdDeviation="3" in="SourceGraphic" />

إذا كان يجب استخدام مخرجات مرشح SVG كمدخل آخر للمرشح، فإنه يجب إضافة خاصية إلى عنصر مرشح result. إليك مثال:

<feGaussianBlur　stdDeviation="3"　in="SourceGraphic"　result="blur"/>

الآن، يمكنك استخدام فلاتر SVG أخرى من خلال وضع قيمة blur في خاصية in لاستخدام خروج هذا الفلتر. في المثال السابق، تم تحديد قيمة blur في خاصية result للفلتر.

حجم الفلتر

يُحدد حجم الفلتر باستخدام خصائص x، y، width وheight.

تُفسر خصائص x وy بناءً على x وy للشكل الذي يتم استخدامه كمدخل. نظرًا لأن خروج بعض الفلاتر عادة ما يكون أكبر من المدخل (مثل إضافة توهين حول الشكل)، فإنه من الضروري استخدام أرقام سلبية لـ x وy لتجنب قطع الرسم الذي أضافته الفلاتر.

في خصائص width وheight أيضًا بسهولة. على سبيل المثال، قد تحتاج أحيانًا إلى تحديد عرض وارتفاع، يجب أن يكون عرض وارتفاع أكبر من الشكل المدخل لتجنب قطع تأثير الفلاتر المضافة.

مجموع الفلاتر

يمكنك استخداممجموعة عناصر الفلاتر. هذا مثال:

<svg　width="500"　height="100">
<defs>
　　　　<filter　id="blurFilter2"　y="-10"　height="40"　x="-10"　width="150">
　　　　　　　　<feOffset　in="SourceAlpha"　dx="3"　dy="3"　result="offset2"　/>
　　　　　　　　<feGaussianBlur　in="offset2"　stdDeviation="3"　　result="blur2"/>
　　　　　　　　<feMerge>
　　　　　　　　　　　　<feMergeNode　in="blur2"　/>
　　　　　　　　　　　　<feMergeNode　in="SourceGraphic"　/>
　　　　　　　　</feMerge>
　　　　</filter>
</defs>
<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);"　/>　
</svg>

يخلق هذا المثال فلاتر SVG يحتوي على عناصر فلاتر اثنين: <feOffset> و <feGaussianBlur>. يؤثر تأثير الفلاتر (feOffset) على قناة Alpha للشكل الذي يتم تطبيقه عليه. يؤثر التوهين المعياري (feGaussianBlur) على خروج الفلاتر المضطرب.

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

مصفى التوهين الكسري

مصفى التوهين الكسري لـ SVG يمكنه توهين أشكال SVG. مصفى التوهين الكسري مكون منتمثل عنصر <feGaussianBlur>.

<svg width="500" height="250">
<defs>
　　　　<filter id="blurFilter4" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);"　/>
</svg>

في هذا المثال، تم تعريف <filter> يحتوي على <feGaussianblur>. ثم تم تعريف مستطيل أخضر، والذي يستدعي هذا الفلتر من خلال خصائص CSS filter. إليك الصورة المولدة:

حجم البلة

عنصر <feGaussianBlur> الخاص بـ stdDeviation يحدد مقدار الحجوم الذي سيتم تطبيق الفلتر عليه. كلما زاد الرقم، زاد الغموض في الشكل. إليك أمثلة على ثلاثة قيم مختلفة لـ stdDeumation:

<svg width="500" height="250">
<defs>
　　　　<filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="2"　/>
　　　　</filter>
　　　　<filter id="blurFilter6" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="6"　/>
　　　　</filter>
　　　　<filter id="blurFilter7" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="12"　/>
　　　　</filter>
</defs>
<rect x="20" y="24" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);"　/>
<rect　x="150"　y="24"　width="90"　height="90"}}
　　　　　　style="stroke:　none;　fill:　#00ff00;　filter:　url(#blurFilter6);"　/>
<rect　x="300"　y="24"　width="90"　height="90"
　　　　　　style="stroke:　none;　fill:　#00ff00;　filter:　url(#blurFilter7);"　/>
</svg>

تأثير الصورة بعد التشغيل:

لاحظ كيف يصبح المربع أكثر غموضًا، كلما زادت قيمة stdDeumation في فلتر التطبيق.

تلطيخ قناة الألفا

استخدم المثال السابق SourceGraphic كمدخل، مما يعني أن ألوان RGB للشكل تستخدم كمدخل للفلتر. يمكنك تغيير ذلك باستخدام قناة الألفا للشكل كمدخل، عبر تعيين قيمة SourceAlpha في سمة in عنصر <feGaussianBlur>. إليك مثالًا:

<svg width="500" height="250">
<defs>
　　　　<filter　id="blurFilter8"　x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur　in="SourceAlpha"　stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke:　none;　fill:　#00ff00;　filter:　url(#blurFilter8);"　/>　
</svg>

تأثير الصورة بعد التشغيل:

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

التصنيف الفلتر

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

<svg width="500" height="250">
<defs>
　　　　<filter　id="offsetFilter1"　x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feOffset　in="SourceGraphic"　dx="80"　dy="20"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke:　#000000;　fill:　none;　filter:　url(#offsetFilter1);"　/>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: #000000; fill: none; " />
</svg>

في هذا المثال، تم تعريف شكلين في نفس الموقع. تطبق إحدى الشكلين مرشح التحريك، والذي يتحرك الشكل نحو الأسفل واليمنى.

تأثير الصورة بعد التشغيل.

يبدو أن مرشح التحريك يؤثر أيضًا على الشكل بشكل آخر (نوع من الغموض)، لكنني لست متأكدًا لماذا يحدث ذلك. لم أتمكن حتى الآن من العثور على أي تفسير يوضح لماذا يحدث هذا.

مرشح مصفوفة الألوان

يمكن استخدام مرشح مصفوفة الألوان لتحويل مصفوفة على لون الشكل. هذا مثال:

<svg width="500" height="250">
<defs>
　　　　<filter id="colorMatrixFilter1" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feColorMatrix in="SourceGraphic" type="matrix"
　　　　　　　　　　　　　　　　values="0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　"/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #0000ff; filter: url(#colorMatrixFilter1);" />
</svg>

تقدم قيم المصفوفة في سمة values الخاص بـ عناصر <feColorMatrix>. يجب أن تكون هناك في المجموع 4 x 5 = 20 قيمة. هذه القيم سيتم تطبيقها على لون الشكل الأصلي، كما يلي:

　0 0 0 red 0
　0 0 0 green 0
　0 0 0 blue 0
　0 0 0 1 0

تأثير الصورة بعد التشغيل:

ملاحظة: النتائج التي تحصل عليها من مرشحات مصفوفة الألوان في Chrome وFirefox قد تكون غريبة بعض الشيء. المربع المذكور أعلاه تم تحديده باستخدام اللون المملأ، ولكن بعد اكتمال عمل مرشح مصفوفة الألوان، يبقى فقط الشكل.

مفتاحات الت混合

يمكن لمفتاحات الت混合 الجمع بين مدخلات عدة من مرشحات في مخرج واحد. هذا مثال:

<svg width="500" height="250">
　　<defs>
　　　　<filter id="blurFilter3" y="-10" height="40" x="-10" width="150">
　　　　　　<feOffset in="SourceAlpha" dx="3" dy="3" result="offset3"/>
　　　　　　<feGaussianBlur in="offset3" stdDeviation="3" result="blur3"/>
　　　　　　<feBlend in="SourceGraphic" in2="blur3" x="-10" width="160"/>
　　　　</filter>
　　</defs>
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　　filter: url(#blurFilter3);" />
</svg>

في هذا المثال، يتم إعلان مرشح يحتوي على 3 تأثيرات مرشحة. الأولان هما تحريك العنصر المربوط وتأثير الحجب الكسري. الثالث هويتطلب إدخالين (in و in2) ويجب دمجهم في نتيجة واحدة.

النتيجة التي تم الحصول عليها مشابهة جدًا للنتيجة التي تم الحصول عليها من مجموعة المرشحات الم组合ة المذكورة في هذا المقال.