| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| svg { |
| border: 1px solid black; |
| } |
| </style> |
| </head> |
| |
| <body> |
| |
| <div class="container"> |
| <p>You should see no red boxes below</p> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400" style=" width: 600px; height: 400px;"> |
| <!-- transform-box: view-box --> |
| <rect x="20" y="10" width="100" height="50" fill="red" /> |
| <rect x="20" y="5" width="50" height="25" fill="green" style="transform: scale(2, 2); transform-origin: 20px 0; transform-box: view-box;" /> |
| |
| <rect x="480" y="40" width="50" height="50" fill="red" /> |
| <rect x="0" y="0" width="50" height="50" fill="green" style="transform: translate(80%, 10%); transform-box: view-box;" /> |
| |
| <rect x="120" y="120" width="50" height="50" fill="red" /> |
| <rect x="180" y="10" width="50" height="50" fill="green" style="transform: rotate(90deg); transform-origin: 120px 60px; transform-box: view-box;" /> |
| <rect x="180" y="10" width="50" height="50" fill="green" style="transform: rotate(90deg); transform-origin: 20% 15%; transform-box: view-box;" /> |
| |
| <!-- transform-box: fill-box --> |
| <rect x="20" y="200" width="100" height="50" fill="red" /> |
| <rect x="20" y="200" width="50" height="25" fill="green" style="transform: scale(2, 2); transform-box: fill-box;" /> |
| |
| <rect x="480" y="260" width="50" height="50" fill="red" /> |
| <rect x="430" y="310" width="50" height="50" fill="green" style="transform: translate(100%, -100%); transform-box: fill-box;" /> |
| |
| <rect x="120" y="320" width="50" height="50" fill="red" /> |
| <rect x="70" y="270" width="50" height="50" fill="green" style="transform: rotate(180deg); transform-origin: 50px 50px; transform-box: fill-box;" /> |
| <rect x="95" y="345" width="50" height="50" fill="green" style="transform: rotate(90deg); transform-origin: 100% 50%; transform-box: fill-box;" /> |
| </svg> |
| </div> |
| |
| </body> |
| </html> |
