Question

我正在创建一种时间线图，我使用SVG DOM创建矩形，然后在html中的表中动态显示它们。问题是每次表格单元格包含两个SVG对象时，它会自动将第二个对象移动到下一行。我希望它们在同一条线上显示，没有任何空间，并且可能在我需要的地方重叠。我已经尝试了所有的东西，如行间距，高度，浮动，填充，边距，但似乎没有什么工作在这里。我正在编写下面代码的一部分。代码的这一部分位于循环内，并重复了多次在多个实例中创建多个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中。将语义包装在＆lt; svg＆gt; 元素中的方式越多。

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

最简单的方法是制作一个css类。

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

然后在你的javascript：

element.classList.add('overlap');

SVG DOM对象间距/重叠

1 个答案: