أحدث البرامج التعليمية وتطوير الشبكة
 

SVG طمس الآثار


<defs> و <مرشح>

يتم تعريف جميع المرشحات SVG الإنترنت ضمن <defs> العنصر. و <defs> العنصر قصيرة للحصول على تعريفات ويحتوي على تعريف العناصر الخاصة (such as filters) .

و <filter> عنصر يستخدم لتحديد مرشح SVG. و <filter> عنصر له سمة معرف المطلوبة التي تحدد التصفية. ثم يشير الرسم إلى مرشح للاستخدام.


SVG <feGaussianBlur>

مثال 1

و <feGaussianBlur> يستخدم عنصر لخلق طمس الآثار:

fegaussianblur

هنا هو رمز SVG:

مثال

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>
انها محاولة لنفسك »

Code explanation:

  • و id سمة من <filter> عنصر يحدد اسما فريدا لمرشح
  • يتم تعريف طمس الأثر مع <feGaussianBlur> العنصر
  • و in="SourceGraphic" جزء يعرف أن يتم إنشاء تأثير للعنصر كامل
  • و stdDeviation تحدد السمة مبلغ طمس
  • و filter سمة من <rect> عنصر تربط عنصر إلى "f1" فلتر