mask-img-ref.html 955 B

12345678910111213141516171819202122232425262728293031
  1. <!DOCTYPE html>
  2. <html>
  3. <body style="margin:0">
  4. <img src='data:image/svg+xml,
  5. <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
  6. xmlns:xlink="http://www.w3.org/1999/xlink"
  7. viewBox="0 0 700 130">
  8. <defs>
  9. <style type="text/css">
  10. .fillSpan {
  11. fill: lightgrey;
  12. stroke: black;
  13. }
  14. </style>
  15. <!-- Fade out effect -->
  16. <mask id="fadeout" maskContentUnits="objectBoundingBox">
  17. <rect x="-0.05" y="-0.05" width="1.1" height="1.1"
  18. fill="url(%23fadeoutGrad)"/>
  19. </mask>
  20. <linearGradient id="fadeoutGrad">
  21. <stop offset="0" stop-color="white" stop-opacity="1"/>
  22. <stop offset="0.35" stop-color="white" stop-opacity="1"/>
  23. <stop offset="0.9" stop-color="white" stop-opacity="0"/>
  24. </linearGradient>
  25. </defs>
  26. <rect y="50" width="150" height="80" class="fillSpan" mask="url(%23fadeout)"/>
  27. </svg>
  28. ' border=0 width="700">
  29. </body>
  30. </html>