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

时间:2019-12-28 08:05:01

标签: svg vector-graphics flowchart

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

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

1 个答案:

答案 0 :(得分:0)

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

例如this生成器:

enter image description here

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

更新

来自documentation的引言,解释了构造二次Bezier曲线的原理

  

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

     

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

enter image description here

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>