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 ...
本项目是基于TypeScript的svgtofont图标字体生成器设计源码，包含49个文件，其中包括8个SVG文件、7个TypeScript文件、5个JavaScript文件、5个Template文件、4个LESS文件、3个JSON文件、2个YAML文件、2个Gitignore...
《codegenerate-3.6.1源码解析与二次开发指南》 在IT行业中，源码分析和二次开发是提升软件功能、优化性能的重要手段。本文将深入探讨"codegenerate-3.6.1源码"，它是基于Jeecg框架的自动生成代码工具的源代码版本...
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 ...
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 ...
《深入解析Jeecg框架3.6.1的Codegenerate模块》 Jeecg框架，作为一款高效的企业级快速开发平台，一直以来深受开发者们的青睐。本文将深入剖析Jeecg框架3.6.1版本中的Codegenerate模块，帮助开发者更好地理解和运用...
an ideal solution is to generate an audio signal using pulse width modulation (PWM). The example firmware and application hardware design are provided with this application note to enable easy porting...