mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
Base: Add SVG preserveAspectRatio
demo page
This commit is contained in:
parent
5df4e64eb7
commit
71ed1e3e50
185
Base/res/html/misc/svg-preserve-aspect-ratio.html
Normal file
185
Base/res/html/misc/svg-preserve-aspect-ratio.html
Normal file
|
@ -0,0 +1,185 @@
|
|||
<!-- Based on the hit MDN example! -->
|
||||
<style>
|
||||
svg {
|
||||
border: 1px solid black;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- (width>height) meet -->
|
||||
<div>
|
||||
<b>xMidYMid meet</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="100"
|
||||
height="50"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
x="0"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>xMinYMid meet</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="100"
|
||||
height="50"
|
||||
preserveAspectRatio="xMinYMid meet"
|
||||
x="25"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>xMaxYMid meet</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="100"
|
||||
height="50"
|
||||
preserveAspectRatio="xMaxYMid meet"
|
||||
x="50"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- (width>height) slice -->
|
||||
<div>
|
||||
<b>xMidYMin slice</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="100"
|
||||
height="50"
|
||||
preserveAspectRatio="xMidYMin slice"
|
||||
x="0"
|
||||
y="15">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>xMidYMid slice</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="100"
|
||||
height="50"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
x="25"
|
||||
y="15">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>xMidYMax slice</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="100"
|
||||
height="50"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
x="50"
|
||||
y="15">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- (width<height) meet -->
|
||||
<div>
|
||||
<b>xMidYMin meet</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="50"
|
||||
height="125"
|
||||
preserveAspectRatio="xMidYMin meet"
|
||||
x="75"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>xMidYMid meet</b><br>
|
||||
</rect>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="50"
|
||||
height="125"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
x="90"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>xMidYMax meet</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="50"
|
||||
height="125"
|
||||
preserveAspectRatio="xMidYMax meet"
|
||||
x="105"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- (width<height) slice -->
|
||||
<div>
|
||||
<b>xMinYMid slice</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="50"
|
||||
height="125"
|
||||
preserveAspectRatio="xMinYMid slice"
|
||||
x="120"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>xMidYMid slice</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="50"
|
||||
height="125"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
x="135"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b>xMaxYMid slice</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="50"
|
||||
height="125"
|
||||
preserveAspectRatio="xMaxYMid slice"
|
||||
x="150"
|
||||
y="0">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- none -->
|
||||
<div>
|
||||
<b>none</b><br>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="160"
|
||||
height="60"
|
||||
preserveAspectRatio="none"
|
||||
x="0"
|
||||
y="30">
|
||||
<circle cx="50" cy="50" r="50" fill="red" />
|
||||
</svg>
|
||||
</div>
|
|
@ -71,6 +71,7 @@
|
|||
<li><a href="pre.html">pre</a></li>
|
||||
<li><a href="svg.html">svg</a></li>
|
||||
<li><a href="svg-transforms.html">svg transforms</a></li>
|
||||
<li><a href="svg-preserve-aspect-ratio.html">svg preserveAspectRatio</a></li>
|
||||
<li><a href="small.html">small</a></li>
|
||||
<li><a href="link.html">link</a></li>
|
||||
<li><a href="afrag.html">links with fragments</a></li>
|
||||
|
|
Loading…
Reference in a new issue