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

  <title>Testcase for opacity on elements referencing a gradient</title>

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

  <defs>

    <linearGradient id="lime" gradientUnits="userSpaceOnUse">

      <stop stop-color="lime"/>

    </linearGradient>

    <linearGradient id="red" gradientUnits="userSpaceOnUse">

      <stop stop-color="red"/>

    </linearGradient>

    <linearGradient id="red2" gradientUnits="userSpaceOnUse">

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

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

    </linearGradient>

    <linearGradient id="redgreen" gradientUnits="userSpaceOnUse">

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

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

    </linearGradient>

  </defs>

  <rect width="100%" height="100%" fill="url(#lime)"/>

  <!-- test 'opacity' -->

  <rect width="25%" height="100%" fill="red" opacity="1"/>

  <!-- test 'fill-opacity' -->

  <rect x="25%" width="25%" height="100%" fill="url(#red)" fill-opacity="0.5"/>

  <!-- test 'fill-opacity' -->

  <rect x="50%" width="25%" height="100%" fill="url(#red2)" fill-opacity="0.5"/>

  <!-- test 'fill-opacity' -->

  <rect x="75%" width="25%" height="100%" fill="url(#redgreen)" fill-opacity="0"/>

</svg>