移动svg:svg不工作

Question

我在移动另一个svg中的svg时遇到了问题。我想直接影响x和y值，但我得到了一个“只读”错误。然后我试着使用transform，但是它什么也做不了。我目前正在使用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元素不支持转换。

但是，为了实现所需的功能，您需要将所有内容包装在一个g元素(一个组)中，您可以对其应用转换：

...
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/