Javascript SVG path元素未在JavaFX8 webview中触发鼠标事件_Javascript_Svg_Webview_Webkit_Javafx 8

Javascript SVG path元素未在JavaFX8 webview中触发鼠标事件

javascript svg webview

Javascript SVG path元素未在JavaFX8 webview中触发鼠标事件,javascript,svg,webview,webkit,javafx-8,Javascript,Svg,Webview,Webkit,Javafx 8,我有一个带有内嵌SVG的html页面。path元素上有一个事件处理程序。这在浏览器（Chrome/IE/FF）中非常有效，但当我在JAVAFX8的webview中尝试这一点时。未为路径元素触发单击事件下面是示例代码。我使用了不同的方法，使用SVG和XML与数据库链接，并将其发布在我的blogspot中使用的源代码是 <html> <head> <title>Tamilnadu Rainfall data in GIS</title>

我有一个带有内嵌SVG的html页面。path元素上有一个事件处理程序。这在浏览器（Chrome/IE/FF）中非常有效，但当我在JAVAFX8的webview中尝试这一点时。未为路径元素触发单击事件

下面是示例代码。

我使用了不同的方法，使用SVG和XML与数据库链接，并将其发布在我的blogspot中

使用的源代码是

<html>
<head>
<title>Tamilnadu Rainfall data in GIS</title>
<style>
p.pos_fixed1
{
FONT: bold 14px Verdana, Arial, Helvetica, sans-serif;
COLOR: #000066;
position:fixed;
top:30px;
left:20px;
z-index=10;
}
p.pos_fixed2
{
FONT: bold 14px Verdana, Arial, Helvetica, sans-serif;
COLOR: #000066;
position:fixed;
top:45px;
left:20px;
z-index=10;
}
iframe.pos_fixed3
{
top:75px;
left:0px;
position:fixed;
width:250px;
height:300px;
}
</style>
<script language="javascript">
var aHexArray="0123456789ABCDEF";
var LLXC=75.0;
var LUYC=13.5833332538605;
var CS=0.00083333333333333;
var x1 = new Array();
var y1 = new Array();
var n1,ild;
var i,j;
var nx;
function fnRandomDec(){
var iMaxDec=256;
var iRandDec=parseInt((iMaxDec*Math.random())-1);
return iRandDec;
}
function fnReturnHex(iDecValue){
return aHexArray.charAt((iDecValue>>4)&0xf)+aHexArray.charAt(iDecValue&0xf);
}
function fnRandColor(){
return "#" + fnReturnHex(fnRandomDec()) + fnReturnHex(fnRandomDec()) + fnReturnHex(fnRandomDec());
}

function drawing(zx)
{
var txt1;
txt1=""
y=xmlDoc.getElementsByTagName("svg")[0].childNodes;
//document.write(y.length-1);
//document.write("<svg onclick=fnchange(); width='" + Math.round(6700/zx) + "' height='" + Math.round(6700/zx) + "'>");

txt1= txt1 + "<svg style=z-index:2; width='" + Math.round(6700/zx) + "' height='" + Math.round(6700/zx) + "' xmlns:xlink='http://www.w3.org/1999/xlink'>";
for (j=0;j<y.length;j++)
{
x=xmlDoc.getElementsByTagName("Polygon")[j].childNodes;
//document.write(x.length-1);
//document.write("<polygon points='");
name=x[0].childNodes[0].nodeValue;
txt1=txt1 + "<a xlink:title=" + name + " xlink:href='wdb4x.asp?dbname=tnrfs&2=xx'" + " target='xy1'>"
txt1= txt1 + "<polygon points='";
for (i=1;i<x.length;i++)
{
  gxy=x[i].childNodes[0].nodeValue;
  n1=gxy.indexOf(",");
  x1[i]=gxy.substr(0,n1);
  y1[i]=gxy.substr(n1+1);
  txt1= txt1 +Math.round(x1[i]/zx)+','+Math.round(y1[i]/zx)+' '
}

txt1=txt1 +"' style='fill:" + fnRandColor() + ";stroke:black;stroke-width:1'></polygon></a>";
}
colr=fnRandColor();
y=xmlDoc1.getElementsByTagName("svg")[0].childNodes;
for (j=0;j<y.length;j++)
{
x=xmlDoc1.getElementsByTagName("point")[j].childNodes;
name=x[0].childNodes[0].nodeValue;
gxy=x[1].childNodes[0].nodeValue;
n1=gxy.indexOf(",");
xx1=gxy.substr(0,n1);
yy1=gxy.substr(n1+1);
str1=name + ':' + Math.abs(LUYC-yy1*CS) + ',' + Math.abs(LLXC+xx1*CS);
txt1=txt1 + "<a xlink:title=" + str1 + " xlink:href='wdb4x.asp?dbname=tnrfs&2=" + name + "' target='xy1'"+"'>";

txt1=txt1 + "<circle cx='" + Math.round(xx1/zx) +"' cy='" + Math.round(yy1/zx) + "' r='5' stroke='black' stroke-width='1' fill='"+ fnRandColor() +"'></circle></a>";
}
txt1=txt1 + "</svg>";
scr1.innerHTML=txt1;
}
function position3(xx1,yy1)
{
xy1.style.top=Math.round(yy1/zx);
xy1.style.left=Math.round(xx1/zx);
}
function fnchange()
{
nx=nx-1;
if(nx==0)nx=1;
drawing(nx);
}
function fnchange1()
{
nx=nx+1;
if(nx>10)nx=10;
drawing(nx);
}

function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
function loadXMLString(txt)
{
if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(txt);
  }
return xmlDoc;
}
xmlDoc=loadXMLDoc("tnbasins.xml");
xmlDoc1=loadXMLDoc("tnrfl.xml");

</script>
</head>
<body>

<p class="pos_fixed1" onclick="fnchange1();">zoom_out</p>
<p class="pos_fixed2" onclick="fnchange();">zoom_in</p>
<iframe class="pos_fixed3" style=width:250;height:300;z-index:1; z-index=-1; name=xy1 border=none frameborder=none></iframe>
<table><tr><td id=scr1></td></tr></table>
<script language="javascript">
if (xmlDoc && xmlDoc1)
{
nx=10;
drawing(nx);
}
</SCRIPT>

</body>
</html>


地理信息系统中的泰米尔纳德邦降雨数据
p、 位置固定1
{
字体：粗体14px Verdana，Arial，Helvetica，无衬线；
颜色：#000066；
位置：固定；
顶部：30px；
左：20px；
z指数=10；
}
p、 位置固定2
{
字体：粗体14px Verdana，Arial，Helvetica，无衬线；
颜色：#000066；
位置：固定；
顶部：45px；
左：20px；
z指数=10；
}
iframe.pos_固定3
{
顶部：75px；
左：0px；
位置：固定；
宽度：250px；
高度：300px；
}
var aHexArray=“0123456789ABCDEF”；
var LLXC=75.0；
var LUYC=13.5833332538605；
var CS=0.00083333；
var x1=新数组（）；
var y1=新数组（）；
变量n1，ild；
varⅠ，j；
var-nx；
函数fnRandomDec（）{
var iMaxDec=256；
var iRandDec=parseInt（（iMaxDec*Math.random（））-1）；
返回伊朗；
}
函数fnReturnHex（iDecValue）{
返回aHexArray.charAt（（iDecValue>>4）和0xf）+aHexArray.charAt（iDecValue和0xf）；
}
函数fnRandColor（）{
返回“#”+fnReturnHex（fnRandomDec（））+fnReturnHex（fnRandomDec（））+fnReturnHex（fnRandomDec（））；
}
功能图（zx）
{
var-txt1；
txt1=“”
y=xmlDoc.getElementsByTagName（“svg”）[0].childNodes；
//文件。书写（y.length-1）；
//文件。填写（“”）；
txt1=txt1+“”；
对于（j=0；j10）nx=10；
图纸（nx）；
}
函数loadXMLDoc（dname）
{
if（window.XMLHttpRequest）
{
xhttp=newXMLHttpRequest（）；
}
其他的
{
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xhttp.open（“GET”、dname、false）；
xhttp.send（）；
返回xhttp.responseXML；
}
函数loadXMLString（txt）
{
if（window.DOMParser）
{
parser=新的DOMParser（）；
xmlDoc=parser.parseFromString（txt，“text/xml”）；
}
else//internetexplorer
{
xmlDoc=新的ActiveXObject（“Microsoft.XMLDOM”）；
xmlDoc.async=false；
xmlDoc.loadXML（txt）；
}
返回xmlDoc；
}
xmlDoc=loadXMLDoc（“tnpains.xml”）；
xmlDoc1=loadXMLDoc（“tnrfl.xml”）；
缩小
放大
if（xmlDoc&&xmlDoc1）
{
nx=10；
图纸（nx）；
}

您正在通过锚定标记包围多边形元素，从而启用单击。但我的问题有点不同，我想知道为什么鼠标事件不是从web视图中的路径元素触发的（事件是从文本等其他元素触发的）。

<html>
<head>
<title>Tamilnadu Rainfall data in GIS</title>
<style>
p.pos_fixed1
{
FONT: bold 14px Verdana, Arial, Helvetica, sans-serif;
COLOR: #000066;
position:fixed;
top:30px;
left:20px;
z-index=10;
}
p.pos_fixed2
{
FONT: bold 14px Verdana, Arial, Helvetica, sans-serif;
COLOR: #000066;
position:fixed;
top:45px;
left:20px;
z-index=10;
}
iframe.pos_fixed3
{
top:75px;
left:0px;
position:fixed;
width:250px;
height:300px;
}
</style>
<script language="javascript">
var aHexArray="0123456789ABCDEF";
var LLXC=75.0;
var LUYC=13.5833332538605;
var CS=0.00083333333333333;
var x1 = new Array();
var y1 = new Array();
var n1,ild;
var i,j;
var nx;
function fnRandomDec(){
var iMaxDec=256;
var iRandDec=parseInt((iMaxDec*Math.random())-1);
return iRandDec;
}
function fnReturnHex(iDecValue){
return aHexArray.charAt((iDecValue>>4)&0xf)+aHexArray.charAt(iDecValue&0xf);
}
function fnRandColor(){
return "#" + fnReturnHex(fnRandomDec()) + fnReturnHex(fnRandomDec()) + fnReturnHex(fnRandomDec());
}

function drawing(zx)
{
var txt1;
txt1=""
y=xmlDoc.getElementsByTagName("svg")[0].childNodes;
//document.write(y.length-1);
//document.write("<svg onclick=fnchange(); width='" + Math.round(6700/zx) + "' height='" + Math.round(6700/zx) + "'>");

txt1= txt1 + "<svg style=z-index:2; width='" + Math.round(6700/zx) + "' height='" + Math.round(6700/zx) + "' xmlns:xlink='http://www.w3.org/1999/xlink'>";
for (j=0;j<y.length;j++)
{
x=xmlDoc.getElementsByTagName("Polygon")[j].childNodes;
//document.write(x.length-1);
//document.write("<polygon points='");
name=x[0].childNodes[0].nodeValue;
txt1=txt1 + "<a xlink:title=" + name + " xlink:href='wdb4x.asp?dbname=tnrfs&2=xx'" + " target='xy1'>"
txt1= txt1 + "<polygon points='";
for (i=1;i<x.length;i++)
{
  gxy=x[i].childNodes[0].nodeValue;
  n1=gxy.indexOf(",");
  x1[i]=gxy.substr(0,n1);
  y1[i]=gxy.substr(n1+1);
  txt1= txt1 +Math.round(x1[i]/zx)+','+Math.round(y1[i]/zx)+' '
}

txt1=txt1 +"' style='fill:" + fnRandColor() + ";stroke:black;stroke-width:1'></polygon></a>";
}
colr=fnRandColor();
y=xmlDoc1.getElementsByTagName("svg")[0].childNodes;
for (j=0;j<y.length;j++)
{
x=xmlDoc1.getElementsByTagName("point")[j].childNodes;
name=x[0].childNodes[0].nodeValue;
gxy=x[1].childNodes[0].nodeValue;
n1=gxy.indexOf(",");
xx1=gxy.substr(0,n1);
yy1=gxy.substr(n1+1);
str1=name + ':' + Math.abs(LUYC-yy1*CS) + ',' + Math.abs(LLXC+xx1*CS);
txt1=txt1 + "<a xlink:title=" + str1 + " xlink:href='wdb4x.asp?dbname=tnrfs&2=" + name + "' target='xy1'"+"'>";

txt1=txt1 + "<circle cx='" + Math.round(xx1/zx) +"' cy='" + Math.round(yy1/zx) + "' r='5' stroke='black' stroke-width='1' fill='"+ fnRandColor() +"'></circle></a>";
}
txt1=txt1 + "</svg>";
scr1.innerHTML=txt1;
}
function position3(xx1,yy1)
{
xy1.style.top=Math.round(yy1/zx);
xy1.style.left=Math.round(xx1/zx);
}
function fnchange()
{
nx=nx-1;
if(nx==0)nx=1;
drawing(nx);
}
function fnchange1()
{
nx=nx+1;
if(nx>10)nx=10;
drawing(nx);
}

function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
function loadXMLString(txt)
{
if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(txt);
  }
return xmlDoc;
}
xmlDoc=loadXMLDoc("tnbasins.xml");
xmlDoc1=loadXMLDoc("tnrfl.xml");

</script>
</head>
<body>

<p class="pos_fixed1" onclick="fnchange1();">zoom_out</p>
<p class="pos_fixed2" onclick="fnchange();">zoom_in</p>
<iframe class="pos_fixed3" style=width:250;height:300;z-index:1; z-index=-1; name=xy1 border=none frameborder=none></iframe>
<table><tr><td id=scr1></td></tr></table>
<script language="javascript">
if (xmlDoc && xmlDoc1)
{
nx=10;
drawing(nx);
}
</SCRIPT>

</body>
</html>