Angular SVG Filters and Effects

Explain how to apply SVG filters and effects, such as blur or drop shadows, to elements in Angular templates using filter attributes and predefined filter definitions.

// Angular component
import { Component } from '@angular/core';

@Component({
  selector: 'app-svg-filters',
  template: `
    <svg width="200" height="200">
      <!-- Define an SVG filter -->
      <defs>
        <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
      </defs>

      <!-- Apply the filter to a rectangle -->
      <rect width="100" height="100" style="fill:blue;" filter="url(#blurFilter)"></rect>

      <!-- Apply the filter to text -->
      <text x="60" y="60" font-family="Verdana" font-size="35" style="fill:red;" filter="url(#blurFilter)">
        Blur
      </text>
    </svg>
  `
})
export class SvgFiltersComponent {}

This Angular component defines a template with SVG containing a blur filter and applies it to both a rectangle and text elements within the SVG.