filter-applied.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="f1" x="20" y="73" width="144" height="32" filterUnits="userSpaceOnUse">

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

      <feMerge>

        <feMergeNode in="flood"/>

        <feMergeNode in="SourceGraphic"/>

      </feMerge>

    </filter>

    <filter id="f2" x="20" y="173" width="240" height="32" filterUnits="userSpaceOnUse">

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

      <feMerge>

        <feMergeNode in="flood"/>

        <feMergeNode in="SourceGraphic"/>

      </feMerge>

    </filter>

  </defs>

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

    <text x="20" y="100" filter="url(#f1)">one</text>

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

      <text x="20" y="200">three</text>

    </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>