blob: 1865b49a46112a95526656050290a97b298fa09c [file] [log] [blame]
<!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(390px, 5px)"/>
<rect width="120" height="30" fill="green" style="transform: translate(330px, 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(390px, 5px)"/>
<rect width="120" height="30" fill="green" style="transform: translate(330px, 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, 200px"/>
<rect width="30" height="120" fill="green" style="transform: translate(40px, 140px)"/>
</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, 200px)"/>
<rect width="30" height="120" fill="green" style="transform: translate(40px, 140px)"/>
</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(200px, 200px); transform-box: view-box;"/>
<rect width="80" height="80" fill="blue" style="transform: translate(40px, 40px); transform-box: fill-box;"/>
</svg>
</body>
</html>