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

    <clipPath id="c" x="0" y="0" width="600" height="400">

      <rect width="100" height="400"/>

    </clipPath>

  </defs>

  <g style="font: 32px Ahem; fill: blue; white-space: pre">

    <text x="20" y="100" clip-path="url(#c)">one</text>

    <text x="20" y="150" clip-path="url(#c)" style="text-decoration: line-through">   </text>

    <g clip-path="url(#c)">

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

      <text x="20" y="250" style="text-decoration: line-through">   </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="173" width="96" height="32"/>

  </g>

</svg>