我在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>
等
我想以编程方式将此路径分类为圆形,矩形,椭圆形等几何形状。当我以编程方式表示时,我的意思是不应涉及图像处理技术,即严格要求。有什么办法吗?
答案 0 :(得分:0)
从示例代码中可以看到,使用Quadratic Bezier Curves
。使用贝塞尔曲线的曲线通常不是手动编写的。
在任何矢量编辑器中或使用在线Bezier曲线生成器都可以更轻松地完成此操作。
例如this生成器:
更详细地讲,可以研究path和所有用于创建here和贝塞尔曲线的命令的含义。
更新
来自documentation的引言,解释了构造二次Bezier曲线的原理
另一种贝塞尔曲线(称为Q的二次曲线)是 实际上是比三次曲线更简单的曲线。它需要一个控制 确定曲线在两个起点处的斜率的点 和终点。它有两个参数:控制点和 曲线的终点。请注意,q的坐标增量为 两者都相对于上一个点(即dx和dy不 相对于dx1和dy1)。
Q x1 y1, x y (or q dx1 dy1, dx dy)
<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>