| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| border: 2em blue solid; |
| } |
| svg { |
| background: pink; |
| } |
| </style> |
| </head> |
| <body> |
| <svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <clippath id="clip1"> |
| <rect width="8" height="4"></rect> |
| </clippath> |
| <g clip-path="url(#clip1)"> |
| <circle cx="1" cy="1" r="1" fill="green"></circle> |
| <circle cx="7" cy="1" r="1" fill="green"></circle> |
| <circle cx="1" cy="7" r="1" fill="green"></circle> |
| <circle cx="7" cy="7" r="1" fill="green"></circle> |
| </g> |
| </svg> |
| <svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <clippath id="clip2"> |
| <rect y="4" width="8" height="4"></rect> |
| </clippath> |
| <g clip-path="url(#clip2)"> |
| <circle cx="1" cy="1" r="1" fill="green"></circle> |
| <circle cx="7" cy="1" r="1" fill="green"></circle> |
| <circle cx="1" cy="7" r="1" fill="green"></circle> |
| <circle cx="7" cy="7" r="1" fill="green"></circle> |
| </g> |
| </svg> |
| <br> |
| <svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <clippath id="clip3"> |
| <rect width="8" height="2"></rect> |
| <rect y="4" width="8" height="2"></rect> |
| </clippath> |
| <g clip-path="url(#clip3)"> |
| <circle cx="1" cy="1" r="1" fill="green"></circle> |
| <circle cx="7" cy="1" r="1" fill="green"></circle> |
| <circle cx="1" cy="7" r="1" fill="green"></circle> |
| <circle cx="7" cy="7" r="1" fill="green"></circle> |
| </g> |
| </svg> |
| <svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <clippath id="clip4"> |
| <rect y="2" width="8" height="2"></rect> |
| <rect y="6" width="8" height="2"></rect> |
| </clippath> |
| <g clip-path="url(#clip4)"> |
| <circle cx="1" cy="1" r="1" fill="green"></circle> |
| <circle cx="7" cy="1" r="1" fill="green"></circle> |
| <circle cx="1" cy="7" r="1" fill="green"></circle> |
| <circle cx="7" cy="7" r="1" fill="green"></circle> |
| </g> |
| </svg> |
| </body> |
| </html> |
