Svg 多边形舍入

Question

我正在开发一个使用 svg move/rotate/zoom 功能的应用程序。我在 Laravel 中编写后端，而前端使用 html/css/javascript。我在网上看到折线可能具有某种三次方贝塞尔曲线。

现在我的问题是：多边形 svg 元素是否可能具有与此 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>

是否可以给多边形元素一个立方贝塞尔曲线，这样它就可以创建一个流体多边形而不是正方形的非圆角多边形？

Answer 1

多边形不使用三次贝塞尔曲线，路径使用。链接的示例不使用任何多边形，而是使用包含此类曲线的路径。

折线和多边形的区别只是后者是闭合的，因此您可以简单地创建一条路径并将其闭合（隐式或显式）。

除此之外，我不确定您的实际问题是什么。

Answer 2

我认为这里的一些回复有点令人困惑。

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

简短的回答是否定的。 <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>

如果您想在 "line" 中包含贝塞尔曲线段，则必须改用 <path> 元素。正如您链接到的示例中所使用的那样。

Answer 3

我建议将一个重复的图形放在另一个笔画宽度较小的图形之上。利润！ :)

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

Svg 多边形舍入

Svg polygon rounding

javascript

svg

bezier

polygon

polyline