<!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
</head>
<body>
<h3>Elipsa - styl domyślny</h3>
<svg width='480' height='320' style='background: #ddd;'>
<ellipse cx='240' cy='160' rx='150' ry='90' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
</style>
</head>
<body>
<h2>Elipsa z wypełnieniem żółtym</h2>
<svg width='480' height='320'>
<ellipse cx='240' cy='160' rx='150' ry='90'
style='fill:yellow;' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
</style>
</head>
<body>
<h2>Elipsa bez wypełnienia z linią 1px</h2>
<svg width='480' height='320'>
<ellipse cx='240' cy='160' rx='150' ry='90'
style='fill:none; stroke:black;' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
</style>
</head>
<body>
<h2>Elipsa z wypełnieniem i linią 5px</h2>
<svg width='480' height='320'>
<ellipse cx='240' cy='160' rx='150' ry='90'
style='fill:lightgreen; stroke:darkgreen; stroke-width:5' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
</style>
</head>
<body>
<h2>Elipsa z wypełnieniem i linią 5px</h2>
<svg width='480' height='320'>
<ellipse cx='240' cy='160' rx='150' ry='90'
fill='lightgreen' stroke='darkgreen' stroke-width='5' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
ellipse { fill:lightgreen; stroke:darkgreen; stroke-width:5;}
</style>
</head>
<body>
<h2>Elipsa z wypełnieniem i linią 5px</h2>
<svg width='480' height='320'>
<ellipse cx='240' cy='160' rx='150' ry='90' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
ellipse { fill:lightgreen; stroke:darkgreen; stroke-width:5;}
</style>
</head>
<body>
<h2>Elipsa z wypełnieniem i linią 5px</h2>
<svg width='480' height='320'>
<ellipse cx='200' cy='120' rx='150' ry='90' />
<ellipse cx='280' cy='200' rx='150' ry='90' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
#zielone { fill:lightgreen; stroke:darkgreen; stroke-width:5;}
</style>
</head>
<body>
<h2>Elipsa z wypełnieniem i linią 5px</h2>
<svg width='480' height='320'>
<ellipse cx='200' cy='120' rx='150' ry='90' />
<ellipse cx='280' cy='200' rx='150' ry='90' id='zielone'/>
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
.zielone { fill:lightgreen; stroke:darkgreen; stroke-width:5;}
</style>
</head>
<body>
<h2>Elipsa z wypełnieniem i linią 5px</h2>
<svg width='480' height='320'>
<ellipse cx='200' cy='120' rx='150' ry='90' class='zielone' />
<ellipse cx='280' cy='200' rx='150' ry='90' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
.zielone { fill:lightgreen; stroke:darkgreen; stroke-width:5;}
</style>
</head>
<body>
<h2>Styl CSS - klasa "zielone"</h2>
<svg width='480' height='320'>
<ellipse cx='200' cy='120' rx='150' ry='90' class='zielone' />
<ellipse cx='280' cy='200' rx='150' ry='90' />
<ellipse cx='100' cy='220' rx='80' ry='90' class='zielone' />
</svg>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
.zielone { fill:lightgreen; stroke:darkgreen; stroke-width:5;}
</style>
</head>
<body>
<h2>SVG - animowanie elementu</h2>
<svg width='480' height='320'>
<ellipse cx='280' cy='200' rx='150' ry='90' />
<ellipse cx='200' cy='120' rx='150' ry='90' class='zielone' />
<ellipse cx='100' cy='220' rx='80' ry='90' class='zielone' />
</svg>
<script>
const elem = document.querySelector('ellipse');
var pos = 0;
function myMove() {
setInterval(frame, 5);
function frame() {
pos = parseInt(elem.getAttribute('cy'));
if(pos > 410) pos = -90;
elem.setAttribute('cy', pos + 1);
}
}
myMove();
</script>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
.zielone { fill:lightgreen; stroke:darkgreen; stroke-width:5;}
</style>
</head>
<body>
<h2>SVG - animowanie elementu</h2>
<svg width='480' height='320'>
<ellipse cx='280' cy='200' rx='150' ry='90' />
<ellipse cx='200' cy='120' rx='150' ry='90' class='zielone' />
<ellipse cx='100' cy='220' rx='80' ry='90' class='zielone' />
</svg>
<script>
const elem = document.querySelectorAll('ellipse')[1];
var pos;
function myMove() {
var id = setInterval(frame, 5);
function frame() {
pos = parseInt(elem.getAttribute('cy'));
if(pos > 410) pos = -90;
elem.setAttribute('cy', pos + 1);
}
}
myMove();
</script>
</body>
</html><!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>Grafika SVG</title>
<meta charset='utf-8'>
<style>
svg { background: #ddd;}
.zielone { fill:lightgreen; stroke:darkgreen; stroke-width:5;}
</style>
</head>
<body>
<h2>SVG - animowanie elementu</h2>
<svg width='480' height='320'>
<ellipse cx='280' cy='200' rx='150' ry='90' />
<ellipse cx='200' cy='120' rx='150' ry='90' class='zielone' />
<ellipse cx='100' cy='220' rx='80' ry='90' class='zielone' />
</svg>
<script>
const elem1 = document.querySelectorAll('ellipse')[1];
const elem2 = document.querySelectorAll('ellipse')[0];
var posx, posy;
function myMove() {
setInterval(frame, 5);
function frame() {
posx = parseInt(elem1.getAttribute('cx'));
posy = parseInt(elem2.getAttribute('cy'));
if (posx > 630) posx = -150;
if (posy > 570) posy = -90;
elem1.setAttribute('cx', posx + 1);
elem2.setAttribute('cy', posy + 1);
}
}
myMove();
</script>
</body>
</html>