CODEWITHSUNDEEP
svgchartspath
Ranjith M
Ranjith M

Reputation: 247

How to draw Small Path with curve SVG

how to draw a small path with a curve, this is the code i've tried.

Straight Path

<path d="M0,6 H30" stroke="#333" stroke-width="1.5"></path>

Curved path with the same length

<path d="M0,6 Q5,10 15,H30" stroke="#333" stroke-width="1.5"></path>

the curved path is not working

Upvotes: 0

Views: 752

Answers (2)

GoWiser
GoWiser

Reputation: 1055

You need to supply 4 parameters for the quadratic curve operator Q. You only supply 3 parameters and you should remove the commas - not that you can't use commas, but they can cause bugs if you use them wrong. Here is an example that draws a quadratic curve and a straight line between the curve's start- and end points:

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 80 Q 95 10 180 80 H 10" stroke="black" fill="transparent"/>
</svg>

See the SVG Path Tutorial and search for quadratic curve.

Upvotes: 2

Paul LeBeau
Paul LeBeau

Reputation: 101830

Q path commands need to have two sets of coordinates after them. That means four numbers. Your path only has three numbers.

Upvotes: 0

Related Questions