HI All today i will give introduction to SVG in HTML5
->SVG stands for Scalable Vector Graphics
->SVG is used to define graphics for the Web
The HTML <svg> element (introduced in HTML5) is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
we have circle ,rectangle etc tags in svg
The following code is to show Indian flag colours in different circles
<!DOCTYPE html>
<html>
<body>
<svg width="150" height="150" >
<circle id='cir' cx="75" cy="75" r="30" stroke="blue" stroke-width="4" fill="orange" />
</svg><br>
<span id="content" style="background-color:white;font-size:23px;">
Indicating the strength and courage of the country
</span>
<script>
var i = 30;
var j = 0;
setInterval("inter()", 3000);
function inter() {
switch (j) {
case 0:
if (i == 40) {
document.getElementById('cir').style.fill="white";
document.getElementById('content').innerHTML="Indicates peace and truth ";
}
if (i == 50) {
document.getElementById('cir').style.fill="green";
document.getElementById('content').innerHTML="Indicates fertility, growth and auspiciousness of the land";
j = 1;
}
document.getElementById('cir').style.r = i;
i = i + 10;
return true;
case 1:
i = i - 10;
if (i == 30) {
document.getElementById('cir').style.fill="orange";
document.getElementById('content').innerHTML="Indicating the strength and courage of the country";
j = 0;
}
if (i == 40) {
document.getElementById('cir').style.fill="white";
document.getElementById('content').innerHTML="Indicates peace and truth ";
}
if (i == 50) {
document.getElementById('cir').style.fill="green";
document.getElementById('content').innerHTML="Indicates fertility, growth and auspiciousness of the land";
}
document.getElementById('cir').style.r = i;
}
return true;
}
</script>
</body>
</html>
ADVANCED HAPPY INDEPENDENCE DAY
OUTPUT
Indicating the strength and courage of the country
->SVG stands for Scalable Vector Graphics
->SVG is used to define graphics for the Web
The HTML <svg> element (introduced in HTML5) is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
we have circle ,rectangle etc tags in svg
The following code is to show Indian flag colours in different circles
<!DOCTYPE html>
<html>
<body>
<svg width="150" height="150" >
<circle id='cir' cx="75" cy="75" r="30" stroke="blue" stroke-width="4" fill="orange" />
</svg><br>
<span id="content" style="background-color:white;font-size:23px;">
Indicating the strength and courage of the country
</span>
<script>
var i = 30;
var j = 0;
setInterval("inter()", 3000);
function inter() {
switch (j) {
case 0:
if (i == 40) {
document.getElementById('cir').style.fill="white";
document.getElementById('content').innerHTML="Indicates peace and truth ";
}
if (i == 50) {
document.getElementById('cir').style.fill="green";
document.getElementById('content').innerHTML="Indicates fertility, growth and auspiciousness of the land";
j = 1;
}
document.getElementById('cir').style.r = i;
i = i + 10;
return true;
case 1:
i = i - 10;
if (i == 30) {
document.getElementById('cir').style.fill="orange";
document.getElementById('content').innerHTML="Indicating the strength and courage of the country";
j = 0;
}
if (i == 40) {
document.getElementById('cir').style.fill="white";
document.getElementById('content').innerHTML="Indicates peace and truth ";
}
if (i == 50) {
document.getElementById('cir').style.fill="green";
document.getElementById('content').innerHTML="Indicates fertility, growth and auspiciousness of the land";
}
document.getElementById('cir').style.r = i;
}
return true;
}
</script>
</body>
</html>
ADVANCED HAPPY INDEPENDENCE DAY
OUTPUT
Indicating the strength and courage of the country
Posts
No comments:
Post a Comment