mask-img.html 984 B

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