41 lines
2.1 KiB
HTML
41 lines
2.1 KiB
HTML
<!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> |