SVG中的Turtle图形？

Question

在logo的turtlegraphics的svg路径中是否有等价物？而不是硬编码的x和y坐标,这也迫使我在移动更相对的"delta"方法时调整控制点.我的解决方案适用于FOCS(Firefox Opera Chrome Safaries ex IE)浏览器.
关于Jeroen.

Answer 1

编辑:我用这个概念制作了一个实时编辑的webapp:http://forresto.github.com/turtle-svg/

如果你想在JavaScript中创建一个带有龟图形(带旋转)的SVG路径,那么它不需要太多的数学运算:

// Turtle graphics drawing to SVG path
var TAU = 2 * Math.PI;

var pen = true;
var d = "";
var vector = {
  x: 0,
  y: 1
};
var currentAngle = 0;

// Relative turns, angles are 0.0 to 1.0
var turnRight = function(angle){
  currentAngle += angle;
  currentAngle = currentAngle%1;
  vector.x = Math.sin(TAU*currentAngle);
  vector.y = Math.cos(TAU*currentAngle);
};
var turnLeft = function(angle){
  turnRight(-angle);
};

// Absolute turn
var turnTo = function(angle){
  currentAngle = angle;
  vector.x = Math.sin(TAU*currentAngle);
  vector.y = Math.cos(TAU*currentAngle);
};

// Drawing
var penUp = function(){
  pen = false;
};
var penDown = function(){
  pen = true;
};

// Relative moves
var moveForward = function (distance) {
  d += pen ? "l " : "m ";
  d += (distance * vector.x) + " " + (distance * vector.y) + " ";
}

// Absolute moves
var moveTo = function (x, y) {
  d += pen ? "L " : "M ";
  d += x + " " + y + " ";
}

然后设置d生成的路径d.通过一些递归绘图查看它:http://jsfiddle.net/forresto/hVE2U/

Answer 2

SVG 路径的第一个 Google 结果：http://www.w3schools.com/svg/svg_path.asp

引用：“大写字母表示绝对定位，小写字母表示相对定位。”