javascript - SVG - How to fill a polygon whose sides are formed from bezier curves? -


I want to create something like the following using pure SVG but without using a D 3 wires similar functionality.

Enter image details here

I'm enabled standard path Using the elements, using the beijier curves in SVG creates a polygon. But the way to fill that polygon with custom color is not known how to define the boundary of this polygon and set the fill property?

Any ideas where the group can help?

If you want to fill in this field, you only have one path element You can use Bezier curves together so that one starts where the end is ending. Then, add Z at the end of the path data to close the path.

  & lt; Svg xmlns = "http://www.w3.org/2000 / SVG" width = "500" height = "300" & gt; & Lt; Path D = "M 480 150 C 300 200, 200 150, 20 200C15 150, 15 150, 20 100C 200 100, 300 150, 480 150Z" Stroke = "Black" Fill = "Red" & gt; & Lt; / Path & gt; & Lt; / Svg & gt;   

If you know where all your points and control points should go, then making different paths is not difficult anymore.

Here's one if you want to play with path data and see how chaining works.

Comments

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -