radialgradient-fully-overlapping.svg

Enable keyboard shortcuts

Default Checkerboard Light Dark

<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">

  <title>Radial gradient with overlapping start and end circles</title>

  <metadata>

    <h:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#RadialGradientNotes"/>

    <h:link rel="match" href="reference/green-100x100.svg"/>

    <h:meta name="assert" content="If the start circle fully overlaps with the end circle, the gradient should be drawn."/>

  </metadata>

  <rect width="100" height="100" fill="red"/>

  <radialGradient id="fully_overlapping" r="100" fr="100">

    <stop stop-color="green"/>

    <stop stop-color="green" offset="1"/>

  </radialGradient>

  <rect width="100" height="100" fill="url(#fully_overlapping) orange"/>

</svg>