10 - SVG Web Grafik

Ne kete leksion

Hello world - SVG

svg.php

<?php

header("Content-type: image/svg+xml");

echo '<?xml version="1.0" standalone="no"?>';

echo '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">';

echo

'<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="300px" height="300px">';

echo "

<title>Small SVG example</title>

<circle id='rrethi' cx='120' cy='150' r='60' fill='#F0F0F0'>

<animate attributeName='r' from='2' to='80' begin='0'

dur='3' repeatCount='indefinite' /></circle>

<rect x='19' y='37' fill='#52B848' stroke='#000000' stroke-miterlimit='10' width='80' height='59' id='greenBlock' />

<polyline points='120 30, 25 150, 290 150' id='vije'

stroke-width='4' stroke='brown' fill='none' />

<polygon points='210 100, 210 200, 270 150' id='pol'

fill='green' />

<text id='mesazh' x='60' y='250' fill='blue'>Hello, World!</text>

</svg> ";

?>

index.php

<html>

<head>

<title>SVG Examples</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<p><a href="svg.php">SVG Document dynamically generated by server side script</a></p>

<p><a href="svgdom.php">Client Site modification of SVG graphics using svg DOM</a></p>

<p><a href="svggis.php">Modification of SVG graphics using svg DOM based on server

side data</a></p>

<p>&nbsp;</p>

</body>

</html>

svgdom.php

<script>

function poligon(ngjyra)

{

var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var p = svg.getElementById("pol");

p.setAttribute("fill", ngjyra);

}

function ngjyros_rreth(ngjyra)

{

var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var rr = svg.getElementById("rrethi");

rr.setAttribute("fill", ngjyra);

}

function ngjyros_vije(ngjyra)

{

var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var v = svg.getElementById("vije");

v.setAttribute("stroke", ngjyra);

}

function svgloaded() {

console.log("test");

var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var td = svg.getElementById("mesazh");

td.textContent = "Prove shkrimi i SVG nga DOM";

var gn = svg.getElementById("greenBlock");

gn.setAttribute("fill", "#000000");

}

document.addEventListener("DOMContentLoaded", function(){

var svgEmbed = document.querySelector("#svgembed");

svgEmbed.addEventListener("load", svgloaded);

},false);

</script>

<table>

<tr>

<td>

<object data="svg.php" id="svgembed"></object>

</td>

<td>

<br>

Color the polygon:

<input type="color" name="poligon_color" onChange="poligon(this.value);">

<br>

<br>

Color the circle:

<input type="color" name="rreth_color" onChange="ngjyros_rreth(this.value);">

<br>

Color the line:

<input type="color" name="vije_color" onChange="ngjyros_vije(this.value);">

<br>

<br>

</td>

</tr>

</table>

svggis.php

<script>

function ngjyros_katror(country_id)

{

var xmlhttp;

if (window.XMLHttpRequest)

{

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else

{

alert("Your browser does not support XMLHTTP!");

}

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4)

{


var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var shteti = svg.getElementById("greenBlock");

shteti.setAttribute("fill", xmlhttp.responseText);

ekran.innerHTML=xmlhttp.responseText;

}

}

//ndrysho(tabela,celesi,vleracelesit,kollona,vleraere)

url='ngjyros.php?shteti='+country_id;

//alert(url);

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

function poligon(ngjyra)

{

var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var p = svg.getElementById("pol");

p.setAttribute("fill", ngjyra);

}

function ngjyros_rreth(ngjyra)

{

var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var rr = svg.getElementById("rrethi");

rr.setAttribute("fill", ngjyra);

}

function ngjyros_vije(ngjyra)

{

var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var v = svg.getElementById("vije");

v.setAttribute("stroke", ngjyra);

}

function svgloaded() {

console.log("test");

var svgEmbed = document.querySelector("#svgembed");

var svg = svgEmbed.getSVGDocument();

var td = svg.getElementById("mesazh");

td.textContent = "Prove shkrimi i SVG nga DOM";

var gn = svg.getElementById("greenBlock");

gn.setAttribute("fill", "#000000");

}

document.addEventListener("DOMContentLoaded", function(){

var svgEmbed = document.querySelector("#svgembed");

svgEmbed.addEventListener("load", svgloaded);

},false);

</script>

<table>

<tr>

<td>

<object data="svg.php" id="svgembed"></object>

</td>

<td>

<br>

Color the polygon:

<input type="color" name="poligon_color" onChange="poligon(this.value);">

<br>

<br>

Color the circle:

<input type="color" name="rreth_color" onChange="ngjyros_rreth(this.value);">

<br>

Color the line:

<input type="color" name="vije_color" onChange="ngjyros_vije(this.value);">

<br>

<select name="country" onChange="ngjyros_katror(this.value);" >

<option value="1">Albania</option>

<option value="2">Italy</option>

</select>

<br>

<div id="ekran"></div>

</td>

</tr>

</table>

ngjyros.php

<?php

$sh=$_REQUEST['shteti'];

include('db.php');

$q="select * from countries where code=$sh";

$res=mysql_query($q) or die(mysql_error());

$rresht=mysql_fetch_array($res);

$ngjyra=$rresht['color'];

echo $ngjyra;

?>