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> </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;
?>