svg.html - mozsearch

Enable keyboard shortcuts

<!DOCTYPE html>

<div id="main">

  <svg viewBox="0 0 10 10">

    <defs>

      <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />

    </defs>

    <use id="circle" href="#myCircle" fill="green" />

  </svg>

</div>

<script>

  const observer = new PerformanceObserver(list => {

    const fcp = list.getEntriesByName("first-contentful-paint");

    if (!fcp.length)

      return;

    // Message the parent when FCP has been reached.

    parent.postMessage("GotFCP", '*');

});

  observer.observe({ type: "paint", buffered: true });

</script>