gradient-transform-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" version="1.1"

  viewBox="0 0 100 100" preserveAspectRatio="none">

  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=946529 -->

  <title>Test for gradientTransform with scientific notation</title>

  <desc>

    Creates a horizontal linear gradient when the left half is red and the right

    half is green and with a width just over twice the width of the rectangle.

    Then a gradientTransform using exponential notation shifts the gradient to

    the left so that only the red part shows.

  </desc>

  <defs>

    <linearGradient id="grad"

      gradientUnits="userSpaceOnUse"

      gradientTransform="translate(-1.1e2 0)"

      x1="0" y1="0" x2="210" y2="0">

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

      <stop stop-color="red"  offset="0.5"/>

      <stop stop-color="lime" offset="0.5"/>

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

    </linearGradient>

  </defs>

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

</svg>