<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<object id="oo" data="Dynamic_grouping.svg" style="position:fixed;width: 900px;height:750px;bottom: -220px;right: 180px;">
</object>
</body>
<script type="text/javascript">
var far=document.getElementById("oo")
far.addEventListener("load", function (){
var svgDoc=far.contentDocument;
var svgRoot=svgDoc.documentElement;
document.getElementById("bar").onclick=function(){
var g = svgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttribute('id', 'group');
g.setAttribute('shape-rendering', 'inherit');
g.setAttribute('pointer-events', 'all');
var use = svgDoc.createElementNS("http://www.w3.org/2000/svg", "use")
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")
use.setAttributeNS(null,"id", "u")
svgRoot.appendChild(use)
var create_bar=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect")
create_bar.setAttribute("id", "r_bar")
create_bar.setAttribute("fill", "cream")
create_bar.setAttribute("x", "300px")
create_bar.setAttribute("y", "50px")
create_bar.setAttribute("width", "100px")
create_bar.setAttribute("height", "30px")
create_bar.setAttribute("pointer-events", "inherit")
g.appendChild(create_bar)
var cir = svgDoc.createElementNS("http://www.w3.org/2000/svg", "circle");
cir.setAttribute( "id","cir")
cir.setAttribute( "cx","320px")
cir.setAttribute( "cy","65px")
cir.setAttribute( "r","10px")
cir.setAttribute('fill', 'red')
cir.setAttribute('pointer-events', 'inherit')
g.appendChild(cir)
svgRoot.appendChild(g)
}
var btn_id=document.getElementById('bar2')
btn_id.onclick=function()
{
var a=svgDoc.getElementById('r_bar')
var b=svgDoc.getElementById('group')
var c=svgDoc.getElementById('cir')
var d=svgDoc.getElementById('u')
alert(a.id+".."+b.id+".."+c.id+".."+d.id)
}
},false)
</script>
<input type="button" id="bar" value="Ribbon_Bar">
<input type="button" id="bar2" value="ID">
</html>
如何在SVG中动态创建一个<g>元素
5
- Zain
1
1这个问题自首次发布以来可能已经被更新/更改。它不再是一个问题，并且没有答案指出的错误。 - Erik Dahlström
1个回答
11
我认为这是错误的原因：
use.setAttribute（'xlink：href'，'g1'）
正确的语法是：
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")
基本上你缺少链接的哈希标记，而且你应该使用命名空间感知的setAttributeNS。
关于setAttribute，你应该知道在那里使用前缀是不被推荐的。来自DOM 3核心规范（该部分的最后一段）：
DOM Level 1方法不具备命名空间意识。 因此，虽然在不涉及命名空间时使用这些方法是安全的，但同时使用它们和新方法应该避免。
- Erik Dahlström
12
我已经更新了代码，Erik，但仍然没有进展...！我已经更改了代码并更新了新的代码，请看一下...谢谢。 - Zain
Erik，以下是我想在Web应用程序中实现的功能要点。用户可以使用鼠标在SVG对象周围绘制一个矩形，从而选择所有对象。然后将所有这些对象分组，如果用户希望，他可以将该组移动到另一个位置，组内的所有对象都会同时移动（保持彼此之间的距离）。希望这能勾勒出我试图实现的功能类型。 - Zain
周围的 html+scripts 在哪里？如果您试图在
<object> 或 <embed> 标记上捕获鼠标事件，那是行不通的。您的 onclick 处理程序被调用了吗？（可以使用 alert 进行验证）。 - Erik Dahlström在动态创建时，我的矩形和圆形也被创建了，但它们没有分组。 - Zain
嗨，Erik，我想请你帮忙。我一直在尝试通过你的Opera博客联系你，但都没有成功......无论如何，请帮帮我吧。我遇到的问题是这样的：我正在处理SVG，我已经在SVG中实现了拖放功能，现在我想要实现网格捕捉功能，我已经尝试了很多次，但是无法实现。我已经上传了代码，你可以查看一下，任何帮助都将是非常棒的......这是我上传代码的链接。
http://stackoverflow.com/questions/4507784/snap-to-grid-functionality-using-javascript - Zain
显示剩余7条评论
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接