مولد تأثيرات مرشحات SVG
مرشد
مولد تأثيرات مرشحات SVG
تصميم SVG <filter> تُظهر التأثيرات بوضوح. اختر مُجرد فلتر — تباعد جاوس، أنواع مصفوفة اللون (تدوير اللون، التثبيت، تحويل الإضاءة إلى الألوفا)، اندفاع مع تباعد، ظل مُنخفض، أو مُجرد مصفوفة التحويل (الإظهار، الحفر، التكبير، كشف الحواف) — وقم بتعديل معلماته باستخدام مساحات التحكم مع مراقبة معاينة SVG حية على النص، الأشكال، أو الصورة المُرفعَة. نسخ المُخرج <filter> الحَدّ المُكوّن ونص مُعدّ للإدراج في CSS.
كيفية استخدام
- اختر مُجرد فلتر من القائمة مُحَدِّث السّبعة مُجردات الفلتر
- ضع مُجرد فريد معرّف الفلتر — يصبح المُجرد
idعلى العنصر<filter>وهو الهدفurl(#…). - قم بتعديل المعلمات التي تظهر للمُجرد المُختار (مُساحات التحكم، مُختارات الألوان، نوع الضوضاء، إلخ).
- قم بتغيير الهدف المُعرض بين النص، الأشكال، أو الصورة — رفع صورة خاصة بك لرؤية التأثير على المحتوى الحقيقي.
- انسخ المُنشأ مُخرج SVG للفلتر إدراجها في الصفحة (يمكن أن توجد في أي مكان — حتى داخل SVG مُخفية وذات حجم صفر).
- قم بتطبيقها في CSS باستخدام النص المُدرج: إما المختصر المُدمج (عند توفره) أو المُخرج
filter: url(#filterId)كيف تؤثر نطاق المُختار على المتغير المخصص؟
خصائص
- سبعة مبادئ مرشح — تباعد جاوس، تدوير اللون، التثبيت، تحويل الإضاءة إلى الألوفا، اندفاع مع تباعد، ظل مُنخفض، ومُجردات مصفوفة التحويل (الإظهار، الحفر، التكبير، كشف الحواف).
- معاينة SVG المُباشرة — تغذية بصرية فورية عند تمرير المُساحات؛ لا حاجة لخطوة إعادة التكوين، ولا تذبذب.
- الثلاثة أهداف المعاينة — تطبيقها على نص واضح، أشكال بسيطة، أو صورة مُرفعَة من قبلك لرؤية كيف تُظهر المُجردات على محتوى حقيقي.
- الناتجان — المُخرج الكامل
<filter>الحَدّ المُكوّن (مُعدّ للإدراج في أي SVG) ونص مُعدّ للإدراج في CSS مع المختصر المُدمج عند توفره. - ظل مُنخفض مع شفافية — يجمع بين
feDropShadowالمسائل الشائعة التي يجب مراقبتهاflood-opacityالتي لا يمكن التعبير عنها في المختصر المُدمج للـ CSS. - مُجردات مُنظّمة للفلتر — يُحافظ على قيمك
idمُستخدمة فيurl(#…)المرجعية.
التعليمات
-
ما الفرق بين فلتر CSS وفلتر SVG؟
مختصرات فلتر CSS (مثل التباعد، تدوير اللون، الظل المُنخفض، إلخ) هي قائمة محددة من التأثيرات التي يُحولها المتصفح إلى مُجردات فلتر SVG. يُتيح لك فلتر SVG في SVG الوصول المباشر إلى هذه المُجردات — مثل feGaussianBlur، feColorMatrix، feTurbulence، feDisplacementMap، feConvolveMatrix، وغيرها — ويُمكنك تجميعها لتكوين تأثيرات (الانحناءات، الضوضاء، الإظهار، تغيير القنوات) التي لا يمكن التعبير عنها في المختصر. أي شيء يمكنك فعله في CSS، يمكنك فعله في SVG، ولكن العكس ليس صحيحًا.
-
ما معنى معلمة stdDeviation على feGaussianBlur؟
يُشير stdDeviation إلى الانحراف المعياري للوزن القياسي المستخدم لتحديد الجوار المتجاور. قيمة أكبر تُوزع القيمة على عدد أكبر من الخلايا، مما ينتج تأثيرًا أكثر تباعدًا. يمكنك إدخال رقم واحد (تباعد موحد في المحورين) أو رقمين مفصولين بمسافة (مقدار تباعد مختلف على المحور X والمحور Y) لتقديم تباعد موجه.
-
كيف يعمل feTurbulence، ولماذا يُستخدم مع feDisplacementMap؟
يُولّد feTurbulence تدفقًا تلقائيًا للضوضاء من نوع Perlin داخل صورة SVG، ويُتحكم فيه بـ baseFrequency (مقياس الضوضاء) وnumOctaves (مستويات التفاصيل). لا يُنتج الضوضاء وحدها سوى نسيج ملون. يستخدم feDisplacementMap هذا التدفق كمُدخل (in2) ويستخدم قنوات R/G لتغيير مواقع الخلايا في صورة المصدر، مما ينتج تأثيرات مُتغيرة مثل الانحناءات، الدخان، موجات الماء، والانحناءات. يُحدد معلمة scale مدى تباعد كل خلية.
-
ما هي مصفوفة النواة، وكيف تُنتج feConvolveMatrix تأثيرات الإظهار أو الكشف عن الحواف؟
تُتحرك مصفوفة النواة (النواة) على كل خلية، وتُضرب كل خلية بخلية الجوار المقابلة، ثم تُجمع النتائج. تُنتج مصفوفات مختلفة تأثيرات مختلفة: مصفوفة تُطرح من الخلايا العلوية اليسرى إلى الخلايا السفلى اليمنى تُنتج التظليل الاتجاهي الذي نُقره كإظهار؛ مصفوفة تحتوي على -1 حول مركز موجب تُعزز الفروق وتُنتج كشف الحواف أو التكبير. تُحدد معلمة order حجم النواة (عادة 3 لـ 3x3)، وتنظم الناتج عبر معلمة divisor وbias.
-
لماذا لا يعمل فلتر SVG عندما يُطبّق باستخدام CSS filter: url(#id)؟
أربعة أسباب شائعة: (1) العنصر ليس موجودًا في DOM عند تطبيق القاعدة CSS — تأكد من أن الفلتر SVG مُدمج داخل الصفحة، وليس مُحمّل من ملف خارجي يُمنعه المتصفح. (2) لا يتطابق المعرّف الذي تُشير إليه مع المعرّف الموجود على العنصر (مُحدد الحالة، يجب أن يكون فريدًا). (3) العنصر الذي يتم تطبيق الفلتر عليه له حجم صفر أو يُقصى من منطق الفلتر الافتراضي — ضع معلمات x، y، width، height على العنصر (غالبًا x="-30%" y="-30%" width="160%" height="160%") لضمان أن تأثيرات مثل التباعد أو الظل المُنخفض لا تُقطع عند الحدود.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
