Javascript 在另一个SVG jQuery中嵌入SVG

我在一个名为“背景”的svg上添加了很多空白svg，如马赛克，如下所示：

var baseView = document.createElementNS(svgNS,"rect"); 
baseView.setAttributeNS(null,"id",id);
baseView.setAttributeNS(null,"x",xOff);
baseView.setAttributeNS(null,"y",yOff);
baseView.setAttributeNS(null, 'height', bD);
baseView.setAttributeNS(null, 'width', bD);
baseView.setAttributeNS(null,"fill",'red');
baseView.setAttributeNS(null,"stroke","none");
document.getElementById("background").appendChild(baseView);

定义背景时：

<svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

我也试过：

document.getElementById(id).appendChild(branchView);

---

当我直接附加到“背景”svg时，子“trunkView”会正确地附加并且可见，但当它嵌入到“baseView”中时则不可见。根据浏览器，它说它在那里，但不显示。有什么想法吗？

如果你看一下“rect”元素的规格，你会看到：

Content model:
Any number of the following elements, in any order:
animation elements — ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘set’
descriptive elements — ‘desc’, ‘metadata’, ‘title’

所以不允许将“rect”元素作为“rect”元素的内容，这就解释了为什么它不呈现

见：

编辑：

要对元素进行分组，可以使用“g”元素。像这样：

var baseView=document.createElements（'http://www.w3.org/2000/svg“，“rect”）；
baseView.setAttributeNS（null，“id”，5）；
baseView.setAttributeNS（null，“x”，5）；
baseView.setAttributeNS（null，“y”，5）；
baseView.setAttributeNS（空，'height'，100）；
baseView.setAttributeNS（null，'width'，100）；
setAttributeNS（null，“fill”，“red”）；
setAttributeNS（空，“笔划”，“无”）；
document.getElementById（“组”）.appendChild（baseView）；
var trunkView=document.createElements（'http://www.w3.org/2000/svg“，”rect“）；
trunkView.setAttributeNS（空，“id”，10）；
trunkView.setAttributeNS（空，“x”，40）；
trunkView.setAttributeNS（空，“y”，40）；
trunkView.setAttributeNS（空，'高度'，100）；
trunkView.setAttributeNS（空，'宽度'，100）；
trunkView.setAttributeNS（null，“fill”，“black”）；
setAttributeNS（空，“笔划”，“无”）；
document.getElementById（“组”）.appendChild（trunkView）
如果您查看“rect”元素的规格，您将看到：

Content model:
Any number of the following elements, in any order:
animation elements — ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘set’
descriptive elements — ‘desc’, ‘metadata’, ‘title’

所以不允许将“rect”元素作为“rect”元素的内容，这就解释了为什么它不呈现

见：

编辑：

要对元素进行分组，可以使用“g”元素。像这样：


var baseView=document.createElements（'http://www.w3.org/2000/svg“，“rect”）；
baseView.setAttributeNS（null，“id”，5）；
baseView.setAttributeNS（null，“x”，5）；
baseView.setAttributeNS（null，“y”，5）；
baseView.setAttributeNS（空，'height'，100）；
baseView.setAttributeNS（null，'width'，100）；
setAttributeNS（null，“fill”，“red”）；
setAttributeNS（空，“笔划”，“无”）；
document.getElementById（“组”）.appendChild（baseView）；
var trunkView=document.createElements（'http://www.w3.org/2000/svg“，”rect“）；
trunkView.setAttributeNS（空，“id”，10）；
trunkView.setAttributeNS（空，“x”，40）；
trunkView.setAttributeNS（空，“y”，40）；
trunkView.setAttributeNS（空，'高度'，100）；
trunkView.setAttributeNS（空，'宽度'，100）；
trunkView.setAttributeNS（null，“fill”，“black”）；
setAttributeNS（空，“笔划”，“无”）；
document.getElementById（“组”）.appendChild（trunkView）

没有办法嵌入子对象？我需要能够动画化父代，并考虑让父代成为一个常规div，但是希望提高性能。参阅我的编辑，您可以使用“G”元素，这些元素是用于分组其他SVG元素的。没有嵌入孩子的方法吗？我需要能够动画化父代，并考虑让父代成为一个常规div，但希望提高性能。参阅我的编辑，您可以使用“G”元素，这些元素是用于分组其他SVG元素的。