CODEWITHSUNDEEP
htmlcsssvg
ma77c
ma77c

Reputation: 1086

using svg line to imitate border of div

The end goal of this

The problem is the extra padding below the top of the containing div. I do not know the source of the padding. Any tries at top: 0; or margin: 0; are unsuccessful.

Actual Results enter image description here

I have an svg line with a div that contains it. This all happens in the ...

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; }
}

Upvotes: 2

Views: 2706

Answers (2)

jtorrescr
jtorrescr

Reputation: 627

Not sure about the root cause, but adding the following css solved it.

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

http://jsfiddle.net/wmeLa8tc/

Upvotes: 0

Adrift
Adrift

Reputation: 59769

This is because the <svg> element is inline by default, so vertical-align applies and defaults to baseline.

A quick fix is to change the vertical-align value: updated fiddle

svg {
    vertical-align: top;
}

Upvotes: 2

Related Questions