移動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元素。

但是，爲了達到你需要什麼，你需要來包裝AG元素的一切（一組），您可以應用轉換到：

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

，然後當你設置的轉換

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

像這樣，您創建的每個SVG都會有一個組，並且該組將包含您需要翻譯的所有內容，並且此組將支持其他類型的轉換。 http://jsfiddle.net/un6ep/69/

編輯：好，你需要用它來對IE瀏覽器...似乎IE不知道孩子：

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

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