Javascript 如何设计/操作SVG USE元素的内容

我在一个页面上有三个SVG图像。一个是“图像编辑器”，在这里你可以输入一些文本，一个图标，拖动和缩放它，等等

另外两个SVG通过use元素使用顶部SVG中的内容，并显示最终结果的预览

当我在编辑器中编辑某些内容时，两个预览会自动更新。完美的但我不想在下面两个预览SVG中显示边界框、变换工具、指南等

---

有没有一种方法可以设置（CSS）或操纵（JS）这些SVG的（阴影）DOM以不显示这些额外的元素？

更改编辑器代码，使绘图元素进入一个组，句柄元素进入另一个组。然后在克隆SVG中，让

元素引用第一组

svg{
边框：实心1px黑色；
}

就像@paulebeau answer一样，我建议将其置于一组元素之外。
这里的javascript代码将把句柄放在group元素的所有角上。（

在本例中编辑组）。

如果您有一个可以随时绘制的组，您只需将该组放入此代码中，它就应该生成句柄


函数集合属性（元素、属性）{
for（属性中的变量键）{
元素setAttribute（key，attrs[key]）；
}
}
document.addEventListener（“DOMContentLoaded”），函数（事件）{
var svgns=”http://www.w3.org/2000/svg"
var svgdoc=document.getElementById（“编辑svg”）；
var editgroup=svgdoc.getElementById（“编辑组”）；
var grouprect=editgroup.getBBox（）；
var handle=document.createElements（svgns，“rect”）；
设置属性（句柄{
“转换”：“转换（-1.5-1.5）”，
“填充”：“无”，
“笔划”：“黑色”，
“笔划宽度”：“0.5”，
“宽度”：“3”，
“高度”：“3”，
“x”：grouprect.x，
“y”：grouprect.y
});
svgdoc.appendChild（句柄）；
var handle2=document.createElements（svgns，“rect”）；
设置属性（handle2{
“转换”：“转换（-1.5-1.5）”，
“填充”：“无”，
“笔划”：“黑色”，
“笔划宽度”：“0.5”，
“宽度”：“3”，
“高度”：“3”，
“x”：grouprect.x+grouprect.width，
“y”：grouprect.y
});
svgdoc.appendChild（handle2）；
var handle3=document.createElements（svgns，“rect”）；
设置属性（handle3{
“转换”：“转换（-1.5-1.5）”，
“填充”：“无”，
“笔划”：“黑色”，
“笔划宽度”：“0.5”，
“宽度”：“3”，
“高度”：“3”，
“x”：grouprect.x，
“y”：grouprect.y+grouprect.height
});
svgdoc.appendChild（handle3）；
var handle4=document.createElements（svgns，“rect”）；
设置属性（handle4{
“转换”：“转换（-1.5-1.5）”，
“填充”：“无”，
“笔划”：“黑色”，
“笔划宽度”：“0.5”，
“宽度”：“3”，
“高度”：“3”，
“x”：grouprect.x+grouprect.width，
“y”：grouprect.y+grouprect.height，
});
svgdoc.appendChild（handle4）；
var dotterd=document.createElements（svgns，“rect”）；
设置属性（虚线{
“填充”：“无”，
“笔划”：“黑色”，
“笔划宽度”：“0.5”，
“笔划数组”：“5”，
“宽度”：grouprect.width，
“高度”：grouprect.height，
“x”：grouprect.x，
“y”：grouprect.y
});
svgdoc.appendChild（虚线）；
});
.main{
边框：1px纯黑；
}
#编辑svg{
宽度：500px；
}
.预览svg{
边框：1px纯黑；
}

什么都可以问
预览
您可以克隆原始文件并对其进行操作，或者重新构造原始文件，以便
不会指向包含调整大小句柄的内容。我希望通过使用实例来尝试找到更干净的解决方案。这样我就不必跟踪克隆人了。这是一个潜在的失败点。这是一个很好的建议，但不幸的是，我对编辑器中包含句柄的每个元素都使用了组。所有代码都基于此原则。如果我想实现这个解决方案，我需要重写几乎所有内容：（那么你就卡住了。用户引用的内容是原始内容的直接且不可修改的克隆。你不能重写它的样式。