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?

Tequilater

How can i do it then? – Tequilater

I've searched google for two hours. So my response was to come here. – Tequilater

What's the problem with the example you found? – Rida

It is using a polyline instead of a polygon. The polyline has a Path element inside it. – Tequilater

There's no polyline in that example. There's only a path. A polyline or polygon is by definition a series of lines. If you want curves, you need to use a path instead, which is a polyline/polygon on steroids. – Rida

Answer 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.

Zenaidazenana

Answer 2

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

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

Schilling

Is there a way to add radius to specific corner – Rebellion

Answer 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.

Rida