47 lines
2.3 KiB
HTML
47 lines
2.3 KiB
HTML
<!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>
|