Svg polygon rounding

Question

I am working on an application that is using svg move/rotate/zoom functionalities. I'm programming the back-end in Laravel and the front-end is using html/css/javascript. I've seen on the web that is possible for a polyline to have some sort of cubic-bezier to it.

Now my question is: is it possible for a polygon svg element to have the same cubic-bezier to it as the polyline like in this example?

The structure of the svg looks like is:

<svg>
    <g data-type="track">
        <polygon class="track" points="2588,851 2537,1157 1796,916 1117,723 0,382 40,80 816,314 1885,638 1887,634"></polygon>
        <polygon class="track" points="114,19 73,0 17,497 46,485"></polygon>
    </g>
</svg>

Is it possible to give the polygon element a cubic bezier so that it can create a fluid polygon instead of the square no-rounded polygon?

Solution 1

I think some of the responses here have been a little confusing.

(is it) possible for a polygon svg element to have the same cubic-bezier to it as the polyline

The short answer is no. <polygon> (and <polyline>) elements are always rendered as a sequence of straight line segments between the coordinates you provide. There is no way to automatically make the joins have a radius - like an HTML border-radius. If that is what you are asking.

If the line has a bigger stroke width, you can choose to round the outside corner of the line joins.

.track {
  fill: none;
  stroke: black;
  stroke-width: 20;
}

.round {
  stroke-linejoin: round;
}

<svg width="300" height="300">
    <polygon class="track" points="20,20 290,20 290,130 20,130"></polygon>
    <polygon class="track round" points="20,170 290,170 290,280 20,280"></polygon>
</svg>

If you want to include bezier curve segments in your "line", you will have to use the <path> element instead. As was used in the example you linked to.

Solution 2

I suggest put one duplicated figure above another one with just smaller stroke-width. Profit! :)

<svg viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
 <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180" stroke-linejoin="round" stroke-width="50" stroke="red"/>
 <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180" stroke-linejoin="round" stroke-width="30" stroke="#fff"/>
</svg>

Solution 3

A polygon does not use cubic Bézier curves, a path does. The example linked does not use any polygons, but a path which includes such curves.

The difference between a polyline and a polygon is simply that the latter is closed, so you can simply create a path and close it (implicitly or explicitly).

Beyond that, I'm not sure what your actual issue is.

Comments

[Himanshu Singh Chauhan]

Is there a way to add radius to specific corner