捕捉 SVG：使用“for 循环”转换/平移 x 位置

Question

使用 snap.svg.js。试图翻译 xPos 但没有任何反应。

这里是示例jsfiddle.net/hswuhdj4

window.objectPool = {
    rectQ1: paper.rect(0,0,0, svgHeight).attr({fill:lighterBlue}),
    rectQ2: paper.rect(0,0,0, svgHeight).attr({fill:lighterBlue}),
    rectQ3: paper.rect(0,0,0, svgHeight).attr({fill:lighterBlue}),
    rectQ4: paper.rect(0,0,0, svgHeight).attr({fill:lighterBlue}),
    rectQ5: paper.rect(0,0,0, svgHeight).attr({fill:lighterBlue}),
    rectQ6: paper.rect(0,0,0, svgHeight).attr({fill:lighterBlue})
}

我使用对象池，因此我可以重复使用我的对象来保持性能。

window.rectsQ = [
    objectPool.rectQ1,
    objectPool.rectQ2,
    objectPool.rectQ3,
    objectPool.rectQ4,
    objectPool.rectQ5,
    objectPool.rectQ6
];

将它们推入一个 Array rectsQ 以便将来访问

var rectAmount = 6;
var rectWidth = 100;

for(i=0;i<rectAmount;i++){
    paper.node.appendChild(window.rectsQ[i].node); //immitates toFront() function of Raphael.
    window.rectsQ[i].attr({width:rectWidth}); //assigning a width
    window.rectsQ[i].transform('T' + (svgWidth-(rectWidth*(i+1))) + ' 0');
}

首先，我将对象调回前面，然后分配一个宽度，最后将 x-pos 平移到 svg-tag 的右侧。

这似乎不是太难，但出于某种原因，无论我做什么变换，对象都不会移动。

//It stays right at these coordinates:
x = 0, 
y = 0

//while it should be moved to:
x = svgWidth-rectWidth,
y = 0

我尝试使用相对翻译 ('t') 而不是绝对翻译 ('T')。虽然没有运气。 有谁知道为什么这些快照对象不会移动，以及如何修复它？

删除 2 个额外的参数有助于我制作的 JSFiddle，但奇怪的是在我的项目中没有。 这是 JSFiddle：http://jsfiddle.net/hswuhdj4/3

已修复！！ 导致问题的原因是本地 snap.svg.js 文件。 使用链接 raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg-min.js 更改目录为我解决了这个问题。

有人知道这是怎么发生的吗？

Answer 1

Transform 通常需要 2 个参数。 IE。 T x y 你给它 4 虽然。

文档说它像路径一样工作，如果是这样，T x y 0 0 将与 T x y T 0 0 相同，后者会将矩形移动到 x y，然后再将其移回 0 0。