| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <p>You should see no red boxes below</p> |
| <svg width="600" height="300" viewBox="0 0 600 300"> |
| <g style="transform: translate(20px, 20px)"> |
| <!-- transform-box: border-box --> |
| <rect x="-19" y="-19" width="118" height="58" fill="red" /> |
| <rect style="transform-box: border-box; transform: rotate(90deg) scale(1, 2) translate(30px, -75%); transform-origin: 50% 0;" width="20" height="20" stroke="green" stroke-width="40" fill="green" /> |
| </g> |
| <g style="transform: translate(160px, 10px)"> |
| <!-- transform-box: view-box --> |
| <rect x="-9" y="-9" width="118" height="58" fill="red" /> |
| <rect style="transform-box: view-box; transform: rotate(90deg) scale(1,2) translate(310px, calc(50% - 35px)); transform-origin: 50% 0;" width="20" height="20" stroke="green" stroke-width="40" fill="green" /> |
| </g> |
| <g style="transform: translate(320px, 20px)"> |
| <!-- transform-box: stroke-box --> |
| <rect x="-19" y="-19" width="118" height="58" fill="red" /> |
| <rect style="transform-box: stroke-box; transform: rotate(90deg) scale(1, 2) translate(30px, -75%); transform-origin: 50% 0;" width="20" height="20" stroke="green" stroke-width="40" fill="green" /> |
| </g> |
| <g style="transform: translate(10px, 100px)"> |
| <!-- transform-box: content-box --> |
| <rect x="-9" y="-9" width="118" height="58" fill="red" /> |
| <rect style="transform-box: content-box; transform: rotate(90deg) scale(1, 2) translate(20px, -87.5%); transform-origin: 50% 0;" width="40" height="40" stroke="green" stroke-width="20" fill="green" /> |
| </g> |
| <g style="transform: translate(160px, 100px)"> |
| <!-- transform-box: fill-box --> |
| <rect x="-9" y="-9" width="118" height="58" fill="red" /> |
| <rect style="transform-box: fill-box; transform: rotate(90deg) scale(1, 2) translate(20px, -87.5%); transform-origin: 50% 0;" width="40" height="40" stroke="green" stroke-width="20" fill="green" /> |
| </g> |
| </svg> |
| </body> |
| </html> |
