如何以编程方式确定svg路径属于哪个几何形状?

问题描述 投票:0回答:1

我在SVG文件中具有d属性的路径,其值类似于

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="300" height="300" viewBox="0 0 100 100" style="border:1px solid red" >  
<path stroke="black" fill="red" d="M 48.75521890547264 45.77014427860697 Q 48.756218905472636 45.77114427860697 50.24875621890547 45.77114427860697 Q 51.74129353233831 45.77114427860697 55.72139303482587 46.26865671641791 Q 59.701492537313435 46.766169154228855 64.17910447761194 46.766169154228855 Q 68.65671641791045 46.766169154228855 73.6318407960199 47.2636815920398 Q 78.60696517412936 47.76119402985075 82.08955223880596 47.76119402985075 Q 85.57213930348259 47.76119402985075 88.55721393034827z" />
</svg>

我想以编程方式将此路径分类为圆形,矩形,椭圆形等几何形状。当我以编程方式表示时,我的意思是不应该涉及图像处理技术,即严格要求。有什么办法吗?

svg vector-graphics flowchart
1个回答
0
投票

从您的示例代码中看到使用Quadratic Bezier Curves。使用贝塞尔曲线的曲线通常不是手动编写的。在任何矢量编辑器中或使用在线Bezier曲线生成器都可以更轻松地完成此操作。

例如this生成器:

enter image description here

更详细地讲,可以研究所有用于创建path和贝塞尔曲线的命令的含义here

更新

[C0中的引言,解释了构造二次贝塞尔曲线的原理

另一种贝塞尔曲线,用Q表示的二次曲线是实际上是比三次曲线更简单的曲线。它需要一个控制确定曲线在两个起点处的斜率的点和终点。它有两个参数:控制点和曲线的终点。请注意,q的坐标增量为两者都相对于上一个点(即dx和dy不相对于dx1和dy1)。

documentation

Q x1 y1, x y (or q dx1 dy1, dx dy)

enter image description here
© www.soinside.com 2019 - 2024. All rights reserved.