代码如下：重体字那边有问题，寻求解决
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="90%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="win_init()">
<defs>
<path id="Triangle" d="M -14,-4 V 4 L 0,0 z" fill="black" stroke="none"/>
</defs>
<style type="text/css">
<![CDATA[
.flowRect
{
opacity:0.9;
fill:#eeeeee;
stroke-width:1;
stroke:rgb(99,99,99);
}
.flowLine
{
opacity:0.9;
fill:#eeeeee;
stroke-width:1;
stroke:rgb(99,99,99);
}
]]>
</style>
<script type="text/ecmascript"> <![CDATA[
var SVGNAMESPACE = "http://www.w3.org/2000/svg";
var XLINKSPACE="http://www.w3.org/2000/xlink/namespace/";
function win_init()
{
createRect(50,50,150,50);
createLine(200,200,300,200);
createLine(400,200,300,200);
createLine(100,100,300,200);
createLine(300,100,300,200);
createLine(300,300,300,200);
}
function createRect(x,y,w,h)
{
var e =document.createElementNS(SVGNAMESPACE,"rect");
e.setAttribute("width",w);
e.setAttribute("height",h);
e.setAttribute("x",x);
e.setAttribute("y",y);
e.setAttribute("rx","10");
e.setAttribute("ry","10");
e.setAttribute("class","flowRect");
document.rootElement.appendChild(e);
}
function createLine(x1,y1,x2,y2)
{
var g = document.createElementNS(SVGNAMESPACE,"g");
var e = document.createElementNS(SVGNAMESPACE,"line");
g.appendChild(e);
e.setAttribute("x1",x1);
e.setAttribute("y1",y1);
e.setAttribute("x2",x2);
e.setAttribute("y2",y2);
e.setAttribute("class","flowLine");
// IE浏览器中正常,FireFox中不能显示
var t = document.createElementNS(SVGNAMESPACE,"use");
t.setAttributeNS(XLINKSPACE,"xlink:href","#Triangle");
t.setAttributeNS(null,"overflow","visible");
var a=Math.atan2(y2-y1,x2-x1) / Math.PI * 180;
t.setAttributeNS(null,"transform","translate( " + x2 + ", " + y2 + ") rotate("+ a +")");
g.appendChild(t);
var text = document.createElementNS(SVGNAMESPACE,"text");
text.appendChild(document.createTextNode("abc"));
text.setAttribute("x",x1 + (x2 - x1)/2);
text.setAttribute("y",y1 + (y2 - y1)/2);
document.rootElement.appendChild(text);
document.rootElement.appendChild(g);
}
]]>
</script>
<use xlink:href="#Triangle" transform="translate(233.21, 126.98) rotate(288)" overflow="visible"/>
</svg>
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → javascript 创建use元素问题
(订阅本版)
2008/10/6 17:16:00
新浪微博
javascript 创建use元素问题
