javascript - SVG DOM 对象间距/重叠

Question

我正在创建一种时间线图，我在其中使用 SVG DOM 创建矩形，然后在 html 表格中动态显示它们。问题是每次表格单元格包含两个 SVG 对象时，它会自动将第二个对象移到下一行。我希望它们在没有任何空间的情况下显示在同一行上，并且可能在我需要它们的地方重叠。 我已经尝试了所有的东西，比如行距、高度、 float 、填充、边距，但这里似乎没有任何效果。我正在下面写我的代码的一部分。这部分代码在一个循环内，并重复多次在多个实例中创建多个 SVG Dom 对象:

var rect=function(h,w,fill){


var NS="http://www.w3.org/2000/svg";
SVGObj.width.baseVal.value=w;
SVGObj.height.baseVal.value=h;
SVGObj.setAttribute("height",h);
SVGObj.style.fill=fill;
return SVGObj;
}


var td1 = document.getElementById(date.toString()+start_hour.toString());
var newdiv = document.createElement('div');
var NS="http://www.w3.org/2000/svg";
var svg=document.createElementNS(NS,"svg");
svg.style.width=wid;
svg.style.paddingLeft = pad.toString()+"px";
newdiv.appendChild(svg);
td1.appendChild(newdiv);
var r= rect(100,wid,"green");
svg.appendChild(r)

Answer 1

您创建的 div 具有默认显示属性:display:block

这会导致它显示在一个新行上。 您不需要将您的内容包装到一个 div 中。更语义化的方式是将其包装在 元素中。

设置 css position:absolute;, top:0; and left:0 快速修复将它们显示在彼此之上。

最简单的方法是创建一个 css 类。

.overlap {
    position:absolute;
    top:0;
    left:0;
}

然后在你的 javascript 中:

element.classList.add('overlap');