mask-and-clipPath.html (1059B)
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 clip-path="url(#clip-1)" 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 <clipPath id="clip-1"> 18 <rect height="462" width="400" x="40" y="-10"> 19 </rect> 20 <rect height="460" width="100" x="800" y="-10"> 21 </rect> 22 </clipPath> 23 <g> 24 <mask id="mask-1"> 25 <rect fill="#fff" height="100%" width="100%" x="0" y="0"> 26 </rect> 27 <rect fill="#000" height="447" offset="164" width="60" x="164" y="0"> 28 </rect> 29 <rect fill="#000" height="447" offset="376" width="56" x="376" y="0"> 30 </rect> 31 </mask> 32 </g> 33 </g> 34 </svg> 35 </body> 36 </html>