Html 用svg线模拟div的边界

这项计划的最终目标是

• 使用svg行在包含该行的div的边框下划线
• webkit动画效果向前冲刺以模拟边界效果

• 如果可能，该行将“成为”div的上边框

问题是包含div的顶部下面有多余的填充。我不知道填充的来源。在

顶部的任何尝试：0或
边距：0不成功

实际结果


该行受未知填充的影响，并向下推了一点

我有一个svg行，其中包含一个div。这一切都发生在

HTML

<div style = "display: inline;" id="divDisplay">

<svg height="1" width="1500">
    <line id="top" x1="0" y1="0" x2="1500" y2="0" />
</svg>

</div>

这是因为默认情况下，
元素是内联的，因此
垂直对齐
应用并默认为

快速修复方法是更改
垂直对齐
值：

不确定根本原因，但添加以下css解决了这个问题

#divDisplay svg
{
    position:absolute;
    top:1;
}

这是因为
位置：绝对自动生成元素块级别，并且
垂直对齐
不再适用。增加
top:1仅供参考。
svg {
    vertical-align: top;
}

#divDisplay svg
{
    position:absolute;
    top:1;
}