filter-applied-ref.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<svg xmlns="http://www.w3.org/2000/svg">

  <style>

    @font-face {

      font-family: Ahem;

      src: url(../../fonts/Ahem.ttf);

  </style>

  <defs>

    <filter id="f" x="0" y="0" width="150%" height="100%" filterUnits="objectBoundingBox">

      <feFlood flood-color="yellow" result="flood"/>

      <feMerge>

        <feMergeNode in="flood"/>

        <feMergeNode in="SourceGraphic"/>

      </feMerge>

    </filter>

  </defs>

  <g style="font: 32px Ahem; fill: blue">

    <rect x="20" y="74" width="96" height="32" filter="url(#f)"/>

    <g filter="url(#f)">

      <rect x="20" y="174" width="160" height="32"/>

    </g>

  </g>

  <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">

    <rect x="20" y="73" width="96" height="32"/>

    <rect x="20" y="73" width="144" height="32"/>

    <rect x="20" y="173" width="160" height="32"/>

    <rect x="20" y="173" width="240" height="32"/>

  </g>

</svg>