mask-and-clipPath-ref.html 1017 B

1234567891011121314151617181920212223242526272829303132333435
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
  5. </head>
  6. <body>
  7. <svg height="100%" preserveAspectRatio="none meet" viewBox="0 0 1070 462" width="100%">
  8. <g height="462" width="1070">
  9. <g mask="url(#mask-1)" transform="translate(0,10)">
  10. <g>
  11. <path class="data-line" d="M30,260L61,266.5L900,266.5" fill="none" stroke="#cc0000" stroke-width="20" visibility="visible">
  12. </path>
  13. </g>
  14. </g>
  15. </g>
  16. <g>
  17. <g>
  18. <mask id="mask-1">
  19. <rect fill="#000" height="100%" width="100%" x="0" y="0">
  20. </rect>
  21. <rect fill="#fff" height="462" width="400" x="40" y="-10">
  22. </rect>
  23. <rect fill="#fff" height="460" width="100" x="800" y="-10">
  24. </rect>
  25. <rect fill="#000" height="447" offset="164" width="60" x="164" y="0">
  26. </rect>
  27. <rect fill="#000" height="447" offset="376" width="56" x="376" y="0">
  28. </rect>
  29. </mask>
  30. </g>
  31. </g>
  32. </svg>
  33. </body>
  34. </html>