clipPath-on-thin-object.svg

Enable keyboard shortcuts

Checkerboard

<?xml version="1.0" encoding="UTF-8"?>

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

  <defs>

    <clipPath clipPathUnits="objectBoundingBox" id="myPath">

      <rect x="0" y="0" height="1" width="1"/>

    </clipPath>

  </defs>

  <!-- You should see a thin horizontal light lime line. -->

  <path d="M0 99.6 L500 99.6 L500 100.3 L0 100.3 Z" fill="lime" clip-path="url(#myPath)"/>

  <!-- You should see a vertical light lime line. -->

  <path d="M199.9 0 L199.9 500 L200.4 500 L200.4 0 Z" fill="lime" clip-path="url(#myPath)"/>

</svg>