页面嵌入svg<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>SVGTest</title>
</head>
<body>
<embed id="SVGDemo" width="1200" height="800" type="image/svg+xml" src="trans03.svg" />
</body>
</html>
svg文件:<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="transSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="841.89px" height="595.281px" viewBox="0 0 841.89 595.281" enable-background="new 0 0 841.89 595.281"
xml:space="preserve">
<defs>
<script type="text/javascript" xlink:href="Scripts/svgControl.js"></script>
</defs>
.
.
.
<g id="TEXT_256_" >
<a xlink:href="#" onmouseover="showInfor(evt)" onmouseout="hideInfor(evt)" onmousemove="showInfor(evt)" ><text transform="matrix(1 0 0 1 486.0347 578.1519)" fill="#FFFFFF" font-family="'SimHei'" font-size="5.8809">4号电容器组</text></a>
</g>
js脚本:var htmlObj,SVGDoc,SVGRoot,viewBox,goLeft,goRight,innerSVG;
var currentSize,currentPosition,currentRoomId,currentRoomLabel;
var svgns="http://www.w3.org/2000/svg";
function showInfor(evt) {
//htmlObj = document.getElementById("SVGDemo");
//SVGDoc = htmlObj.getSVGDocument();
//var circle = document.getElementById("TEXT_256_");
//var originShape = document.getElementById(id);
if (document.getElementById("info") == null )
{
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "rect");
shape.setAttributeNS(null, "id", "info");
shape.setAttributeNS(null, "x", 500);
shape.setAttributeNS(null, "y", 520);
shape.setAttributeNS(null, "rx", 2);
shape.setAttributeNS(null, "ry", 2);
shape.setAttributeNS(null, "width", 100);
shape.setAttributeNS(null, "height", 80);
shape.setAttributeNS(null, "fill", "white");
shape.setAttributeNS(null, "stroke", "#066550");
shape.setAttributeNS(null, "stroke-width", 2);
shape.setAttributeNS(null, "opacity", "0.5");
svgDocument.documentElement.appendChild(shape);
}
}
js脚本是在svg上直接生成一个图形。但我想实现生成div的可控样式图层。
【 在 ottffsse 的大作中提到: 】
: 上代码
:
--
修改:campper FROM 211.160.77.*
FROM 211.160.77.*