gradient-live-01b.svg 1.1 KB

1234567891011121314151617181920212223242526272829
  1. <svg xmlns="http://www.w3.org/2000/svg"
  2. xmlns:xlink="http://www.w3.org/1999/xlink"
  3. class="reftest-wait" font-size="80">
  4. <script type="application/javascript">
  5. document.addEventListener("MozReftestInvalidate", doTest, false);
  6. function doTest() {
  7. document.getElementById('blue').setAttribute('offset', '0.5');
  8. document.documentElement.removeAttribute('class');
  9. }
  10. </script>
  11. <!-- Tests that gradients are live to stop offset changes. -->
  12. <linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
  13. <stop id="green" stop-color="#00dd00" offset="0"/>
  14. <stop id="blue" stop-color="#0000dd" offset="0.9"/>
  15. <stop id="magenta" stop-color="magenta" offset="1"/>
  16. </linearGradient>
  17. <rect x="20" y="20" width="440" height="80" fill="url(#grad1)" />
  18. <linearGradient id="grad2" xlink:href="#grad1"/>
  19. <rect x="20" y="150" width="440" height="80" fill="url(#grad2)" />
  20. <text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text>
  21. <text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text>
  22. </svg>