fergalmoran/ladybird
1
0
Fork 0
mirror of https://github.com/fergalmoran/ladybird.git synced 2025-12-22 09:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Base: Add SVG preserveAspectRatio demo page

Browse Source
This commit is contained in:
MacDue
2023-04-17 01:24:06 +01:00
committed by Andreas Kling
parent 5df4e64eb7
commit 71ed1e3e50
2 changed files with 186 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
Base/res/html/misc/svg-preserve-aspect-ratio.html Normal file
View 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>

1
Base/res/html/misc/welcome.html
View File

@@ -71,6 +71,7 @@
<li><a href="pre.html">pre</a></li> <li><a href="pre.html">pre</a></li>
<li><a href="svg.html">svg</a></li> <li><a href="svg.html">svg</a></li>
<li><a href="svg-transforms.html">svg transforms</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="small.html">small</a></li>
<li><a href="link.html">link</a></li> <li><a href="link.html">link</a></li>
<li><a href="afrag.html">links with fragments</a></li> <li><a href="afrag.html">links with fragments</a></li>