| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| svg { |
| border: 1px solid black; |
| display: block; |
| margin: 2px; |
| } |
| </style> |
| </head> |
| <body> |
| <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 780 80" style="width: 780px; height: 80px"> |
| <rect width="120" height="30" fill="green" style="transform: translate(50%, 5px)"/> |
| <rect width="120" height="30" fill="green" style="transform: translate(calc(50% - 60px), 40px)"/> |
| </svg> |
| <!-- No viewBox --> |
| <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 780px; height: 80px"> |
| <rect width="120" height="30" fill="green" style="transform: translate(50%, 5px)"/> |
| <rect width="120" height="30" fill="green" style="transform: translate(calc(50% - 60px), 40px)"/> |
| </svg> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 400" style="width: 100px; height: 400px; display: inline-block;"> |
| <rect width="30" height="120" fill="green" style="transform: translate(5px, 50%)"/> |
| <rect width="30" height="120" fill="green" style="transform: translate(40px, calc(50% - 60px))"/> |
| </svg> |
| <!-- No viewBox --> |
| <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 100px; height: 400px; display: inline-block;"> |
| <rect width="30" height="120" fill="green" style="transform: translate(5px, 50%)"/> |
| <rect width="30" height="120" fill="green" style="transform: translate(40px, calc(50% - 60px))"/> |
| </svg> |
| |
| <!-- viewBox with non-zero origin --> |
| <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-20 50 100 400" style="width: 100px; height: 400px; display: inline-block;"> |
| <rect width="30" height="120" fill="green" style="transform: translate(5px, 200px"/> |
| <rect width="30" height="120" fill="green" style="transform: translate(40px, 140px)"/> |
| </svg> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 400px; height: 400px; display: inline-block;"> |
| <rect width="80" height="80" fill="green" style="transform: translate(50%, 50%); transform-box: view-box;"/> |
| <rect width="80" height="80" fill="blue" style="transform: translate(50%, 50%); transform-box: fill-box;"/> |
| </svg> |
| |
| </body> |
| </html> |
