SVG file:
empty.svg
Just an empty one.
----------------------------------------------------------
HTML file:
empty.svg
Just an empty one.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect biztype="background" fill="#000000" height="100%" id="background" stroke="#000000" stroke-width="1" width="100%" x="0" y="0" />
<g id="Text">
<text fill="#ffffff" font-family="SimSun" font-size="13" x="10" y="20" >列表</text>
</g>
<g id="root">
</g>
</svg>
----------------------------------------------------------
HTML file:
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>SVG</title>
<script language="javascript">
function init(){
var svgNS="http://www.w3.org/2000/svg";
var xlinkNS="http://www.w3.org/1999/xlink";
var totalRows = 20;
var svgDocument = document.getElementById("devsvg").getSVGDocument();
document.getElementById("devsvg").height = 90 + totalRows * 50;
var newRoot = svgDocument.getElementById("root");
for (var i=0;i<=totalRows;i++) {
var g=svgDocument.createElementNS(svgNS,'g');
var img=svgDocument.createElementNS(svgNS,'image');
img.setAttribute("height", "40");
img.setAttribute("width", "40");
img.setAttribute("x", "30");
img.setAttribute("y", 40 + i * 50);
img.setAttributeNS(xlinkNS,"href","I.png");
g.appendChild(img);
var txt=svgDocument.createElementNS(svgNS,'text');
var tspan=svgDocument.createElementNS(svgNS,'tspan');
tspan.setAttributeNS(null, "id", i);
tspan.setAttribute("x", "90");
tspan.setAttribute("y", 65 + i * 50);
tspan.setAttribute("style", "font-family: Arial, sans-serif; font-size:14; fill:#990066; stroke:none;");
//tspan.addEventListener("click", submit, false);
tspan.setAttribute("onclick", "txtClick('"+i+"')");
tspan.setAttribute("cursor", "pointer");
var tnode = svgDocument.createTextNode(i);
tspan.appendChild(tnode);
txt.appendChild(tspan);
g.appendChild(txt);
newRoot.appendChild(g);
}
}
function txtClick(id){
alert(id);
// sendRequest("/someAction.do?Id="+id,"POST");
}
</script>
</head>
<body onload="init()">
<embed id="devsvg" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="empty.svg" width="200" type="image/svg+xml"/>
<hr>
Also, the width can be modified in init() as 'height' do. <br>
And I put a 40*40 I.png in the same folder. <br>
Test passed in IE and FF.
</body>
</html>
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
