2012-11-28 52 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