| <!DOCTYPE html> |
| <html> |
| <body> |
| |
| <div style="position: relative; left: 27px; width: 100px;"> |
| <div style="width: 50px;"> |
| <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg"> |
| <defs> |
| <pattern id="pattern" width="100" height="100" patternUnits="userSpaceOnUse"> |
| <circle cx="50" cy="50" r="50" fill="green"/> |
| </pattern> |
| |
| <mask id="mask"> |
| <circle cx="50" cy="50" r="50" fill="white"/> |
| </mask> |
| |
| <clipPath id="clip"> |
| <circle cx="50" cy="50" r="50"/> |
| <circle cx="50" cy="50" r="50"/> |
| </clipPath> |
| |
| <filter id="filter"> |
| <feOffset dx="0" dy="0"/> |
| </filter> |
| </defs> |
| |
| <circle cx="50" cy="50" r="50" fill="green"/> |
| |
| <g transform="translate(300)"> |
| <rect width="100" height="100" fill="url(#pattern)"></rect> |
| </g> |
| |
| <g transform="translate(150 150)"> |
| <rect width="100" height="100" fill="green" mask="url(#mask)"/> |
| </g> |
| |
| <g transform="translate(0 300)"> |
| <rect width="100" height="100" fill="green" clip-path="url(#clip)"/> |
| </g> |
| |
| <g transform="translate(300 300)"> |
| <circle cx="50" cy="50" r="50" fill="green" filter="url(#filter)"/> |
| </g> |
| </svg> |
| </div> |
| </div> |
| </body> |
| </html> |
