Path svg将形状放置在路径上

我正在用SVG创建一个游戏，并要求沿一条名为道路的路径放置方形瓷砖。
路径可以弯曲或以一定角度放置，我想相对于路径旋转方形瓷砖

---

我当前的结构是这样的：听起来你应该考虑使用标记来标记瓷砖，然后分割路径，这样你就有了顶点，你希望矩形显示为标记中点。你可以通过标记免费获得方向。

拉斐尔提供了路径通过路径的任意点的角度。getPointAtLenght（x）。SVG有一个本机实现，但它不提供角度。你可以看看拉斐尔的消息来源，看看发生了什么。以下是相关位：

<defs>
    <rect id="tile" width="200" height="200" stroke-width="5" stroke="red"/>
</defs>

getLengthFactory = function (istotal, subpath) {
        return function (path, length, onlystart) {
            path = path2curve(path);
            var x, y, p, l, sp = "", subpaths = {}, point,
                len = 0;
            for (var i = 0, ii = path.length; i < ii; i++) {
                p = path[i];
                if (p[0] == "M") {
                    x = +p[1];
                    y = +p[2];
                } else {
                    l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
                    if (len + l > length) {
                        if (subpath && !subpaths.start) {
                            point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);
                            sp += ["C" + point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y];
                            if (onlystart) {return sp;}
                            subpaths.start = sp;
                            sp = ["M" + point.x, point.y + "C" + point.n.x, point.n.y, point.end.x, point.end.y, p[5], p[6]].join();
                            len += l;
                            x = +p[5];
                            y = +p[6];
                            continue;
                        }
                        if (!istotal && !subpath) {
                            point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);
                            return {x: point.x, y: point.y, alpha: point.alpha};
                        }
                    }
                    len += l;
                    x = +p[5];
                    y = +p[6];
                }
                sp += p.shift() + p;
            }
            subpaths.end = sp;
            point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
            point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha});
            return point;
        }; 

getLengthFactory=函数（istotal，子路径）{
返回函数（路径、长度、仅开始）{
路径=路径2曲线（路径）；
变量x，y，p，l，sp=“”，子路径={}，点，
len=0；
对于（变量i=0，ii=path.length；i长度）{
if（子路径&！子路径开始）{
点=getPointAtSegmentLength（x，y，p[1]，p[2]，p[3]，p[4]，p[5]，p[6]，长度-len）；
sp+=[“C”+点.start.x，点.start.y，点.m.x，点.m.y，点.x，点.y]；
if（onlystart）{return sp；}
子路径开始=sp；
sp=[“M”+点.x，点.y+“C”+点.n.x，点.n.y，点.end.x，点.end.y，p[5]，p[6]].join（）；
len+=l；
x=+p[5]；
y=+p[6]；
继续；
}
如果（！istotal&&！子路径）{
点=getPointAtSegmentLength（x，y，p[1]，p[2]，p[3]，p[4]，p[5]，p[6]，长度-len）；
返回{x:point.x，y:point.y，alpha:point.alpha}；
}
}
len+=l；
x=+p[5]；
y=+p[6]；
}
sp+=p.shift（）+p；
}
子路径结束=sp；
point=istotal？len：子路径？子路径：R.findDotsAtSegment（x，y，p[0]，p[1]，p[2]，p[3]，p[4]，p[5]，1）；
point.alpha&（point={x:point.x，y:point.y，alpha:point.alpha}）；
返回点；
}; 

---

其中point.alpha是旋转角度。

但据我所知，您无法将事件或侦听器链接到标记，因为它们实际上不是DOM/结构的一部分，而是更多的东西的表示端。这是我上次尝试SVGy时记得的。您的问题没有提到这一要求。

id = #
vector2D = {
  x1 = #
  y1 = #
  x2 = #
  y2 = #
}
tiles = # // number of tiles in road

getLengthFactory = function (istotal, subpath) {
        return function (path, length, onlystart) {
            path = path2curve(path);
            var x, y, p, l, sp = "", subpaths = {}, point,
                len = 0;
            for (var i = 0, ii = path.length; i < ii; i++) {
                p = path[i];
                if (p[0] == "M") {
                    x = +p[1];
                    y = +p[2];
                } else {
                    l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
                    if (len + l > length) {
                        if (subpath && !subpaths.start) {
                            point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);
                            sp += ["C" + point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y];
                            if (onlystart) {return sp;}
                            subpaths.start = sp;
                            sp = ["M" + point.x, point.y + "C" + point.n.x, point.n.y, point.end.x, point.end.y, p[5], p[6]].join();
                            len += l;
                            x = +p[5];
                            y = +p[6];
                            continue;
                        }
                        if (!istotal && !subpath) {
                            point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);
                            return {x: point.x, y: point.y, alpha: point.alpha};
                        }
                    }
                    len += l;
                    x = +p[5];
                    y = +p[6];
                }
                sp += p.shift() + p;
            }
            subpaths.end = sp;
            point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
            point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha});
            return point;
        };