使用svg线来模仿div的边界

Question

的最终目标

• 使用svg行来强调包含它的div的边框

• webkit动画效果破折号向前模仿边框效果

• 如果可能的话，到＆＃34;的行是＆＃34; div的顶部边框

问题是包含div顶部下方的额外填充。我不知道填充的来源。 top: 0;或margin: 0;的任何尝试都不会成功。

实际结果

• 该行受未知填充影响并向下推了一下

我有一个包含它的div的svg行。这一切都发生在...

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 {
  background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
  border: 2px solid #dadada;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #111;
  height: 100px;


}


#top {

    top: 0;
    position: fixed;
    margin:0;
    stroke: rgb(112,111,111);
    stroke-width: 5;
    stroke-dasharray:1300;
    stroke-dashoffset:1300;
    -webkit-animation: dash-top 3.00s forwards;
}


@-webkit-keyframes dash-top {
    to { stroke-dashoffset: 0; }
}

Answer 1

这是因为<svg>元素默认为内嵌，因此vertical-align适用，默认为baseline。

快速解决方法是更改​​vertical-align值：updated fiddle

svg {
    vertical-align: top;
}

Answer 2

不确定根本原因，但添加以下css解决了它。

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

http://jsfiddle.net/wmeLa8tc/