SVG多边形舍入 [英] Svg polygon rounding

问题描述

我正在使用SVG移动/旋转/缩放功能的应用程序上工作.我正在Laravel中对后端进行编程，而前端正在使用html/css/javascript.我在网上看到折线可能具有某种三次方贝塞尔曲线.

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.

现在我的问题是:多边形svg元素是否可以像折线一样具有与它的折线相同的立方贝塞尔值，就像在

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?

svg的结构如下:

<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?

推荐答案

我认为这里的某些回答有些令人困惑.

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

(svg)多边形svg元素与折线具有相同的三次方贝塞尔曲线

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

简短的回答是否". <polygon>(和<polyline>)元素始终显示为您提供的坐标之间的直线段序列.无法自动使连接具有半径-就像HTML border-radius一样.如果那是您的要求.

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>

如果要在直线"中包含贝塞尔曲线段，则必须使用<path>元素.就像您链接到的示例一样.

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.

这篇关于SVG多边形舍入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！