mask-and-clipPath-ref.html (1017B)
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>