移動するsvg：svgが機能していません

Question

別のsvgの中にあるsvgを移動するのに問題があります。私は直接xとyの値を有効にしたいが、私は "読み取り専用"エラーを取得します。それから私は変換を使用しようとしましたが、何もしません。私は現在Chromeを使ってテストしています。

コード： http://jsfiddle.net/un6ep/68/

"use strict"; 

function SVGGraph(div, data, pos) { 
    this.div = (div===undefined)?document.getElementsByTagName("BODY")[0]:div; 
    this.data = (data===undefined)?[]:data; 
    this.children = []; 
    this.width = 100; 
    this.height = 100; 

    this.pos = {x:0,y:0}; 
    this.scale = 1; 
    this.rotation = 0; 

    this.ns = "http://www.w3.org/2000/svg"; 

    ///////////////////////////////////////////////////////// 
    //Functions to set the display the information to the user 
    ///////////////////////////////////////////////////////// 
    this.generateSelf = function() { 
     var line = document.createElementNS(this.ns, 'path'); 
     var start = {x:0,y:0} 
     var end = {x:100,y:100} 
     var ctrl = 100; 
     line.setAttribute("d", "M"+start.x+","+start.y+" C"+(start.x+ctrl)+","+start.y+" "+(end.x-ctrl)+","+end.y+" "+end.x+","+end.y+""); 
     line.style.stroke = "#ff00ff"; 
     line.style.fill = "none"; 
     line.style.strokeWidth = "5px"; 

     this.svg.appendChild(line); 
    } 

    ///////////////////////////////////////////////////////// 
    //Functions to deal with child object 
    ///////////////////////////////////////////////////////// 
    this.addChild = function(data) { 
     data = (data===undefined)?[]:data; 
     this.children.push(new SVGGraph(this.svg, data)); 
    } 

    ///////////////////////////////////////////////////////// 
    //Functions to set the properties of the svg 
    ///////////////////////////////////////////////////////// 
    this.setPos = function(x, y) { 
     this.pos.x = x; 
     this.pos.y = y; 
    //I would like to do this.svg.x = <some number> 
     this.updateTransform(); 
    } 

    this.updateTransform = function() { 
     console.log('translate('+this.pos.x+','+this.pos.y+')'); 
    this.svg.setAttribute('transform','translate(50,50)'); 
     //this.svg.setAttributeNS(this.ns,'transform','translate(50,50)'); 
    } 

    ///////////////////////////////////////////////////////// 
    //Init function 
    ///////////////////////////////////////////////////////// 
    this.init = function() { 
     //create the svg area 
     this.svg = document.createElementNS(this.ns, 'svg'); 
     if (this.div.nodeName.toLowerCase() != "svg") {//if the div is not a sub div then make it fill the space 
      this.svg.style.width = "100%"; 
      this.svg.style.height = "100%"; 
     } 
     this.svg.style.overflow = "visible"; 
     this.div.appendChild(this.svg); 
     //generate what this looks like 
     this.generateSelf(); 
    } 
    this.init(); 
} 
var temp; 
window.onload = mainInit; 
function mainInit() { 
    console.log("hello"); 
    temp = new SVGGraph(); 
    temp.addChild(); 
    temp.children[0].setPos(50,50) 
} 
mainInit() 

Answer 1

としてはhere説明は、変換は、SVG要素はサポートされていません。その後、

... 
var group = document.createElementNS(this.ns, 'g'); 
group.appendChild(line); 
this.svg.appendChild(group); 

とトランスフォーム

を設定します。

しかし、あなたはAGの要素（グループ）のすべてをラップする必要があるでしょうし、あなたがそれに変換を適用することができます必要なものを達成するために

this.svg.children[0].setAttribute('transform','translate(50,50)'); 

このように、作成する各SVGにはグループがあり、グループには翻訳が必要なものがすべて含まれ、このグループは他の種類の変換もサポートします。 http://jsfiddle.net/un6ep/69/

EDIT：あなたはこの読み取り専用エラーが出るんどの行で

this.svg.childNodes[0].setAttribute('transform','translate(50,50)'); 

http://jsfiddle.net/un6ep/70/