2012-11-28 25 views
2

我正在加载数据从一个while循环中绘制我的SVG的数据。在我的数据中,每条记录都有自己的ID。从svg getelementbyId是id =“'@ data []”

我想通过getelementbyId加载ID,但一直返回空值。

这是我的代码。

#!/usr/bin/perl 
use DBI; 
use CGI::Carp qw(fatalsToBrowser); 
print "content-type: text/html\n\n"; 
print "Content-Type: image/svg-xml\n\n" ; 
$dbh = DBI->connect ('dbi:Oracle:******','*****','*****') 
|| die "database connection not made: $DBI::errstr"; 

$sth = $dbh->prepare("SELECT Find_id, xcoord, ycoord, gisteach.finds.type, gisteach.class.type, depth, name, period, use FROM GISTEACH.finds, GISTEACH.class where gisteach.finds.type = gisteach.class.type"); 
$sth->execute(); 

$sth1 = $dbh->prepare("SELECT lowx, hix, lowy, hiy, Field_id, owner, GISTEACH.FIELDS.crop, GISTEACH.crops.crop, name from GISTEACH.FIELDS, gisteach.crops where gisteach.crops.crop = gisteach.fields.crop"); 
$sth1->execute(); 

print qq(<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 
    "http://www.w3.org/tr/2000/cr-svg-20001102/DTD/svg-20001102.dtd">); 
print qq(<svg width="20cm" height="20cm" viewBox="-1 -18 20 20" onload="getid(ID)">); 

print qq (<script type="text/ecmascript">); 
print qq (<![CDATA[ 

    // with out this (onload) i still have teh same issue. 
    function getid(ID){ 
    (document.getElementById('ID')); 
    } 
    function MakeTransparent(evt) { 
     evt.target.setAttributeNS(null,"opacity","0.5") 
    } 
    function MakeOpaque(evt) { 
     evt.target.setAttributeNS(null,"opacity","1") 
    } 


    function buttonClick(){ 
     var type = document.getElementById('ID'); 
     var data = type.getAttribute('d') 
     var data2 = type.getAttribute('d2') 
     var data3 = type.getAttribute('d3')  
     alert ("This Find can be placed in the: " + data2 + " age. In which its primary use was; " + data3); 
    } 

    function buttonClick2() { 
     var type = document.getElementById('ID')    
     var data1 = type.getAttribute('b') 
     var data2 = type.getAttribute('c') 

     alert ("Owner of this field is: " + data1 + " Where " + data2 + " are growing"); 
    } 
    ]]>); 
print qq (</script>); 

while (@data = $sth1->fetchrow_array()) { 

print qq( 
    <g transform="scale(1,-1)" > 
     <polygon points="$data[0],$data[2] $data[1],$data[2] $data[1],$data[3] $data[0],$data[3]" 
     fill="green" 
      ID="$data[4]" 
      b="$data[5]" 
       c="$data[8]" 
       opacity="1" 
       stroke="black" 
      stroke-width="0.05" 
     onmouseover="MakeTransparent(evt)" 
     onmouseout="MakeOpaque(evt)" 
    onmouseup="buttonClick2()"/>  
    </g>         
);  
} 
while (@data = $sth->fetchrow_array()) { 
print qq( 
    <g transform="scale(1,-1)" > 
     <circle   
     ID="$data[0]" 
      cx="$data[1]"   
      cy="$data[2]" 
       r="0.17" 
      d="$data[6]" 
      d2="$data[7]" 
     d3="$data[8]"     
     fill="red" 
    onmouseup="buttonClick()"/> 

</g>  
); 
} enter code here 

感谢

+0

Perl的ID? Java的? JavaScript的?为什么你将SVG作为'text/html'发送? – Bergi

+0

它也应该是'image/svg + xml'而不是'image/svg-xml'。见http://www.iana.org/assignments/media-types/image/index.html。 –

回答

1
function getid(ID){ 
    (document.getElementById('ID')); 
} 

应该成为

function getid(ID){ 
    return document.getElementById(ID); 
} 

否则你只是在寻找一个元素与价值 'ID'

+0

它似乎没有工作。它仍然返回一个空值。事实是ID =“$ data [4]”是一个变量的问题? – user1854379

+0

在浏览器中查看产生的SVG,查看源代码。如果'ID ='$ data [4]“'那么你的脚本不会将值提供给SVG。您需要将SVG发射为值,而不是$ data [4]。 – Dave