radialGradient-fr-02.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"

     xmlns:xlink="http://www.w3.org/1999/xlink">

  <title>Test gradient fr attribute</title>

  <defs>

    <radialGradient id="grad1" fr="10%">

      <stop offset="0%" stop-color="red" />

      <stop offset="100%" stop-color="lime" />

    </radialGradient>

    <style>

      .cover {

        stroke-width: 3px;

        stroke: lime;

        fill: none;

        image-rendering: optimizeSpeed;

    </style>

  </defs>

  <rect width="100%" height="100%" fill="lime"/>

  <circle cx="100" cy="100" r="50" fill="url(#grad1)" />

  <circle class="cover" cx="100" cy="100" r="50" />

</svg>