SVG 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>
分享到：
相关推荐
这就是"An AppWizard to Generate Non-COM Projects that can use ATL O"的目标。 这个AppWizard扩展使得开发者能够创建非COM项目，同时能够利用ATL对象向导来添加特定的对象或功能。AppWizard是Visual Studio集成...
Immersive Teleconferencing A New Algorithm to Generate Seamless Panoramic.pdf
@ yzfe / svgicon Generate the data required by the SVG icon component according to the incoming parameters (props)属性） Generate the data required by the SVG icon component according to the incoming ...
Neural networks have recently become good at engaging in dialog. However, current approaches are based solely ... We demonstrate an example application with a face-to-face chatting avatar.
Failed to Generate Report(解决方案).md
Example of working with Microsoft Excel 97 from ... sheet of chart, types of chart, to import data from .dbf file, and an example to generate a report with Excel and to copy to MsWord and to open it.
Failed to generate secure key pair(解决方案).md
例如，给出的`memory_to_vector`模块就是一个利用generate语句将二维数组转换为一维向量的例子。 总之，`generate`是Verilog编程中一个强大的工具，它提供了在硬件描述语言中创建复杂并行结构和条件实例化的能力，...
Dante is a text parser to easily generate a Spannable from a raw input, right now it supports only HTML but the idea is to be able to support multiple input types (e.g., MarkDown). Originally I ...
Excel Macro to Generate Database Insert Script Excel宏生成数据库插入脚本 对于开发人员来说，一次在数据库中添加/编辑主数据或静态数据一直很麻烦，因为它需要为每个小的文本更改集编写脚本。 对于不了解SQL...
For example, this book explains how to access files on a local hard drive and make them available on the virtual machine where SAS is running. 4. Providing a detailed explanation of the output ...
Considering the complex of the data required by Ministry of Transport of P.R.C every period of ten days, I design the following algorithm to generate the data required.
《CheckSum_Generate_exe_v7.1536.00.00：MTK平台校验和生成工具详解》 在IT行业中，数据的完整性和安全性至关重要，尤其是在固件更新、软件分发等场景下。为了确保文件在传输过程中没有被篡改或损坏，通常会使用...
It will introspect a database table (or many tables) and will generate artifacts that can be used to access the table(s). This lessens the initial nuisance of setting up objects and configuration ...
jar svg2png 或下载可执行jar并使用svg2png # just convert a filesvg2png foo.svg# generate a PNG with a namesvg2png -f foo.svg -n bar.png# Convert all *.svg files in the current directory to 24dp android...
在使用QUARTUS II进行FPGA项目开发时，编译过程中可能会遇到“Error: Run Generate Functional Simulation Netlist”的错误提示，这通常是由于缺少仿真网表导致的。在解决这个问题之前，我们首先要理解QUARTUS II的...
It reads a template file to define the SPICE models to be generate. The template file is named template.mdl and must be in the same directory as the application itself. The user is prompted for an ...
This example provides a description of how to use a DMA channel to transfer a word data buffer from memory (Flash) to memory (RAM). The dedicated DMA channel is configured to transfer once a time a ...
《codegenerate-3.6.1源码解析与二次开发指南》 在IT行业中，源码分析和二次开发是提升软件功能、优化性能的重要手段。本文将深入探讨"codegenerate-3.6.1源码"，它是基于Jeecg框架的自动生成代码工具的源代码版本...
R is both an object-oriented language and a functional language that is easy to learn, easy to use, and completely free. A large community of dedicated R users and programmers provides an excellent ...