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;

?>







ċ
countries .sql
(1k)
Endrit Xhina,
Jun 17, 2014, 7:31 AM