32: SVG-Filter auf SVG- und HTML-Elementen

Vielleicht haben Sie von CSS-Filtern gehört? Sie können diese mit CSS auf jedes Element anwenden, wie z. B.

.apply-css-filter {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

Sie können das sogar auf ein HTML-Element oder ein SVG-Element anwenden.

Aber es gibt auch Filter, die Sie innerhalb von SVG definieren können, und es gibt mehr Optionen, wenn Sie dies tun. Hier ist ein Beispiel für eine Definition

<svg>
  <defs>
    <filter id="pictureFilter">
      <feMorphology operator="erode" radius="2" />
    </filter>
  </defs>
</svg>

Sie können ihn dann direkt in SVG auf ein Element anwenden, z. B.:

<svg>
  <!-- could be anything -->
  <image filter="url(#pictureFilter)" xlink:href="image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>

Oder aus dem CSS, indem Sie die ID ähnlich referenzieren

.apply-svg-filter {
  -webkit-filter: url(#pictureFilter);
  filter: url(#pictureFilter);
}

Es gibt viele SVG-Filter. Bekannte wie "blur" und seltsame, die malerische Effekte anwenden. Hier ist die Spezifikation.