Question

我在移动另一个svg里面的svg时遇到了麻烦。我想直接影响x和y值，但我得到一个“只读”错误。然后我尝试使用转换，但它没有做任何事情。我目前正在使用Chrome进行测试。

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

移动svg：svg不起作用

1 个答案: