CODEWITHSUNDEEP
htmlsvg
batman
batman

Reputation: 5380

Why does SVG path curve get filled?

I have an SVG path element:

<path id="SvgjsPath1012" d="M97 267C100 106 400 100 400 250 "></path>

It draws a nice Bezier curve for me, but the shape is filled. It thinks the curve is meant to be a closed polygon. So connects the end vertices of the curve with a straight line and fills the whole closed shape.

All I wanted was a thin "line" curve.

Upvotes: 1

Views: 1358

Answers (1)

Dom
Dom

Reputation: 40459

Paths default to a fill value of black and a stroke value of none. Change the stroke and set the fill to "none" using either css or inline attribute.

http://jsfiddle.net/dirtyd77/ehnzxg00/

Inline:

<path id="SvgjsPath1012" d="M97 267C100 106 400 100 400 250" stroke="red" fill="none"></path>

CSS:

#SvgjsPath1012{
    fill: none;
    stroke: purple;
}

Let me know if you have any questions.

Additional information:

Upvotes: 6

Related Questions