1

我正在使用 raphael.js 测试（手的）矢量，我的印象是“M”参数指示从哪里开始绘制路径，但在我的示例中：http: //jsfiddle.net/7QA43/ 1/当我更改 M 的参数（从 361,243 到 100,100）时，小指的一部分似乎是如何“锚定”到原始位置的。

我已经扫描了 svg 路径数据以查找可能导致此问题的原因，但我找不到它。

部分路径可以关闭吗？

4

1 回答 1

2

在 SVG 路径中，所有路径命令都有两种风格：绝对和相对。

  • 绝对路径命令用大写字母表示，并表示与前一点无关的指定坐标。
  • 相对路径命令用小写字母表示，表示相对于前一个路径命令的位置指定的坐标。

除了最后一个 CurveTo 命令外，所有路径命令都是相对的：
"...44-1.436,3.662-2.155C357.073,245.799,359.609,244.566,361.839,243.057z"

从规格：

使用 (x1,y1) 作为曲线起点的控制点和 (x2,y2) 作为曲线终点的控制点，从当前点到 (x,y) 绘制三次贝塞尔曲线。C（大写）表示后面跟着绝对坐标；c（小写）表示将跟随相对坐标。可以指定多组坐标来绘制多边形。在命令结束时，新的当前点成为 polybézier 中使用的最终 (x,y) 坐标对。

最简单的解决方法是从您的路径中删除此命令，几乎没有明显区别：

通过删除修复：http: //jsfiddle.net/7QA43/2/

或者，不要使用第一个 MoveTo 命令来调整路径的位置。保持原样，并将transform()其移至新位置：

path_a.transform('t-200,-154');

通过变换修复：http: //jsfiddle.net/7QA43/5/

通过在有问题的 CurveTo 之前找到命令的最后一个坐标并更改参数以使用相对值来解决问题，留给读者作为练习。

于 2012-06-05T21:01:39.780 回答