경로상의 svg 장소 모양

Question

SVG에서 게임을 만들고 경로를 따라 사각형 타일이 필요합니다 (도로).
경로를 구부리거나 비스듬하게 놓을 수 있으며 정사각형 타일을 경로와 관련하여 회전하고 싶습니다.

내 현재의 구조는 다음과 같습니다

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

<g style="stroke-width=10px; stroke:#23238E;> 
    <path id="road1" d="M100 100 L 500 100"/> 
    <path id="road2" d="M500 100 L 200 100"/> 
</g> 

SVG의 나의 현재 이해는 내가 보간 타일의 위치를 ​​계산해야하지만 내가의 경로를 기준으로 타일을 회전 할 수 하더군요 자동화 된 패션?

그래서 내가 어떻게 <use x="xx" y="yy" orient="자동" xlink:href="tile"/>을 적용 할 수 있는가?

길은 다음과 같은 정보에서 생성됩니다 : 당신이 원하는 위치에 당신이 타일 마커를 사용하여 다음 정점을 가질 수 있도록 경로를 분할에보고해야한다처럼

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

Answer 1

라파엘 http://raphaeljs.com은 어느 지점에서든 경로 각도를 path.getPointAtLenght(x)까지 제공합니다. SVG는 네이티브 구현을 가지고 있지만 각도를 제공하지는 않습니다. Raphael의 출처를 살펴보면서 무슨 일이 일어나고 있는지 볼 수 있습니다. 다음은 관련 비트입니다.

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; 
     }; 

여기서 point.alpha는 회전 각도입니다.

Answer 2

는 소리 마커 - 중점으로 표시 할 직사각형. 마커로 자유롭게 오리엔테이션을 할 수 있습니다.