mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-01-24 18:24:45 -05:00
f0dde6236d
This is a cut down version of the example, but it's nice to add a test to ensure this keeps working.
125 lines
2.2 KiB
HTML
125 lines
2.2 KiB
HTML
<style>
|
|
* {
|
|
font-family: 'SerenitySans';
|
|
}
|
|
svg {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|