radialGradient-fr-01.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="100%">

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

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

    </radialGradient>

    <radialGradient id="grad2" xlink:href="#grad1"/>

    <style>

      circle {

        stroke-width: 3px;

        stroke: lime;

    </style>

  </defs>

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

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

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

</svg>