opacity-and-gradient-02.svg 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!--
  2. Any copyright is dedicated to the Public Domain.
  3. http://creativecommons.org/publicdomain/zero/1.0/
  4. -->
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  6. <title>Testcase for opacity on elements referencing a gradient</title>
  7. <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=539165 -->
  8. <defs>
  9. <linearGradient id="lime" gradientUnits="userSpaceOnUse">
  10. <stop stop-color="lime"/>
  11. </linearGradient>
  12. <linearGradient id="red" gradientUnits="userSpaceOnUse">
  13. <stop stop-color="red"/>
  14. </linearGradient>
  15. <linearGradient id="red2" gradientUnits="userSpaceOnUse">
  16. <stop stop-color="red" offset="0%"/>
  17. <stop stop-color="red" offset="100%"/>
  18. </linearGradient>
  19. <linearGradient id="redgreen" gradientUnits="userSpaceOnUse">
  20. <stop stop-color="red" offset="0%"/>
  21. <stop stop-color="lime" offset="100%"/>
  22. </linearGradient>
  23. </defs>
  24. <rect width="100%" height="100%" fill="url(#lime)"/>
  25. <!-- test 'opacity' -->
  26. <rect width="25%" height="100%" fill="red" opacity="1"/>
  27. <!-- test 'fill-opacity' -->
  28. <rect x="25%" width="25%" height="100%" fill="url(#red)" fill-opacity="0.5"/>
  29. <!-- test 'fill-opacity' -->
  30. <rect x="50%" width="25%" height="100%" fill="url(#red2)" fill-opacity="0.5"/>
  31. <!-- test 'fill-opacity' -->
  32. <rect x="75%" width="25%" height="100%" fill="url(#redgreen)" fill-opacity="0"/>
  33. </svg>