我正在开发一个使用 svg 移动/旋转/缩放功能的应用程序。我正在 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>
是否可以为多边形元素提供三次贝塞尔曲线,以便它可以创建流体多边形而不是方形非圆角多边形?
我认为这里的一些回应有点令人困惑。
多边形 svg 元素是否可以具有与折线相同的三次贝塞尔曲线
最简洁的答案是不。<polygon>
(and <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>
元素代替。正如您链接到的示例中所使用的那样。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)