mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 15:52:43 +00:00
2c8c56684b
SVG is styleable using CSS, so this adds an extra triangle to the page, which is styled with CSS instead of attributes.
44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>SVG test</title>
|
|
<style>
|
|
.css {
|
|
fill: magenta;
|
|
stroke: yellow;
|
|
stroke-width: 3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg width="800" height="400">
|
|
<path d="M 10 10 h 100 l -50 80 z" fill="green" stroke="black" stroke-width="3"></path>
|
|
<path d="M 60 10 h 100 l -50 80 z" fill="red" stroke="blue" stroke-width="3"></path>
|
|
<path d="M 110 10 h 100 l -50 80 z" class="css"></path>
|
|
|
|
<path d="M 135 275 v -100 a 100,100 0 0,0 -100,100 z" fill="yellow" stroke="blue" stroke-width="3"></path>
|
|
<path d="M 150 290 v -100 a 100,100 0 1,1 -100,100 z" fill="red" stroke="blue" stroke-width="3"></path>
|
|
|
|
<path d="M 300,20 l 30,10
|
|
a 10,10 20 0,1 30,10 l 30,10
|
|
a 10,20 20 0,1 30,10 l 30,10
|
|
a 10,30 20 0,1 30,10 l 30,10
|
|
a 10,40 20 0,1 30,10 l 30,10"
|
|
fill="none" stroke="red" stroke-width="5"></path>
|
|
|
|
<path d="M 300,160 l 30,10
|
|
a 10,10 20 0,1 30,10 l 30,10
|
|
a 10,20 20 0,1 30,10 l 30,10
|
|
a 10,30 20 0,1 30,10 l 30,10
|
|
a 10,40 20 0,1 30,10 l 30,10"
|
|
fill="orange" stroke="red" stroke-width="5"></path>
|
|
|
|
<path d="M 300,300 l 30,10
|
|
a 10,10 20 0,1 30,10 l 30,10
|
|
a 10,20 20 0,1 30,10 l 30,10
|
|
a 10,30 20 0,1 30,10 l 30,10
|
|
a 10,40 20 0,1 30,10 l 30,10 z"
|
|
fill="orange" stroke="red" stroke-width="5"></path>
|
|
</svg>
|
|
</body>
|
|
</html>
|