использования SVG линии для имитации границы DIV

Question

конечной целью этой

• использования SVG линии, чтобы подчеркнуть границы DIV, который содержит его

• WebKit эффектов анимации тир вперед, чтобы имитировать пограничные эффекты

• Если возможно, линия «быть» верхняя граница DIV

Задача - дополнительное дополнение под верхней частью содержащего div. Я не знаю источник заполнения. Любые попытки на top: 0; или margin: 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 { 
    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/