Question

172

Svg polygon rounding

rated 0 times [ 175] [ 3] / answers: 1 / hits: 17360 / 9 Years ago, mon, december 21, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dakotahs

Add To Favorites

Follow

Total Points: 605

Total Questions: 104

Total Answers: 113

Location: Hungary

Member since Wed, Nov 9, 2022

2 Years ago

answered 9 Years ago debras · Accepted Answer

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.