mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
Base: Add SVG transform test page
This commit is contained in:
parent
ba6272a0a0
commit
8aecd8c7ac
108
Base/res/html/misc/svg-transforms.html
Normal file
108
Base/res/html/misc/svg-transforms.html
Normal file
|
@ -0,0 +1,108 @@
|
|||
<style>
|
||||
body {
|
||||
margin: 50px;
|
||||
}
|
||||
</style>
|
||||
<!-- SVG transforms test page, based on MDN examples -->
|
||||
<svg
|
||||
width="200px" height="100px"
|
||||
viewBox="0 0 150 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g
|
||||
fill="grey"
|
||||
transform="rotate(-10 50 100)
|
||||
translate(-36 45.5)
|
||||
skewX(40)
|
||||
scale(1 0.5)">
|
||||
<path
|
||||
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="red"
|
||||
>
|
||||
<path
|
||||
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="10" y="10" width="30" height="20" fill="green" />
|
||||
<rect
|
||||
x="10"
|
||||
y="10"
|
||||
width="30"
|
||||
height="20"
|
||||
fill="red"
|
||||
transform="matrix(3 1 -1 3 30 40)" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-3" y="-3" width="6" height="6" />
|
||||
|
||||
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="10" height="10" />
|
||||
|
||||
<!-- rotation is done around the point 0,0 -->
|
||||
<rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
|
||||
|
||||
<!-- rotation is done around the point 10,10 -->
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="10"
|
||||
height="10"
|
||||
fill="green"
|
||||
transform="rotate(100 10 10)" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- uniform scale -->
|
||||
<circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
|
||||
|
||||
<!-- vertical scale -->
|
||||
<circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1 4)" />
|
||||
|
||||
<!-- horizontal scale -->
|
||||
<circle cx="0" cy="0" r="10" fill="pink" transform="scale(4 1)" />
|
||||
|
||||
<!-- No scale -->
|
||||
<circle cx="0" cy="0" r="10" fill="black" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-3" y="-3" width="6" height="6" />
|
||||
|
||||
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- No translation -->
|
||||
<rect x="5" y="5" width="40" height="40" fill="green" />
|
||||
|
||||
<!-- Horizontal translation -->
|
||||
<rect
|
||||
x="5"
|
||||
y="5"
|
||||
width="40"
|
||||
height="40"
|
||||
fill="blue"
|
||||
transform="translate(50)" />
|
||||
|
||||
<!-- Vertical translation -->
|
||||
<rect
|
||||
x="5"
|
||||
y="5"
|
||||
width="40"
|
||||
height="40"
|
||||
fill="red"
|
||||
transform="translate(0 50)" />
|
||||
|
||||
<!-- Both horizontal and vertical translation -->
|
||||
<rect
|
||||
x="5"
|
||||
y="5"
|
||||
width="40"
|
||||
height="40"
|
||||
fill="yellow"
|
||||
transform="translate(50 50)" />
|
||||
</svg>
|
|
@ -70,6 +70,7 @@
|
|||
<li><a href="images.html">images</a></li>
|
||||
<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="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