SVG多边形舍入

Question

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

现在我的问题是：多边形svg元素是否可以像本例中那样与折线具有相同的立方贝塞尔值？

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>

是否可以给多边形元素一个三次方贝塞尔曲线，以便它可以创建一个流体多边形而不是正方形的不倒圆角多边形？

Answer 1

我认为这里的一些回应有些混乱。

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

最简洁的答案是不。<polygon>（和<polyline>）元素始终显示为您提供的坐标之间的直线段序列。无法自动使连接具有半径（如HTML）border-radius。如果那是您要的。

如果直线的笔划宽度较大，则可以选择对直线连接的外角进行圆角处理。

.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>元素。如您所链接的示例中所使用的。