nw.jsでデスクトップアプリを作る（１４） - SVG pathをgeometryに変換する（４）

SVGのデータをバウンディング・ボックス単位で分割して座標補正をかける部分の続き。

各馬のpathデータのd属性の先頭にあるm(moveTo)命令のx,y座標からバウンディング・ボックスのx,y座標を引けばよいはずである。実験のためのコードは下。

window.addEventListener('load',function(){
  var xml = Q.nfbind(d3.xml);
  xml('./horse00.svg','image/svg+xml')
  .then(function(svg){
    try {
      d3.select('#svg').node().appendChild(svg.firstChild);
      var gs = d3.select('svg').selectAll('g')[0];
      gs.forEach(function(g){
        var boundingBox = g.querySelector('rect');
        var path = g.querySelector('path');
        console.log(boundingBox.x);
        console.log(boundingBox.y);
        path.animatedPathSegList[0].x = path.animatedPathSegList[0].x - boundingBox.x.baseVal.value;
        path.animatedPathSegList[0].y = path.animatedPathSegList[0].y - boundingBox.y.baseVal.value;
        console.log(path.animatedPathSegList[0].x);
      });
    } catch (e) {
      console.log(e);
    }
  });

これを実行すると結果は下記のようになった。3つほど意図したとおりにならないpathがある。データを見てみるとデータの途中から絶対座標になっている部分があった。どうもInkscapeで編集している途中で混入してしまったらしい。

原因は不明だがおそらくpathデータを結合する部分のやり方がまずいのだろうと思う。どのようにすれば直るのか調べているところである。