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
];

将它们推入数组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

我尝试过使用相对翻译（＆＃39; t＆＃39;）而不是绝对翻译（＆＃39; T＆＃39;）。虽然没有运气。有没有人知道为什么这些快照对象不会移动，以及如何修复它？

我在JSFiddle中删除了2个额外的参数，但奇怪的是不在我的项目中。这是JSFiddle：http://jsfiddle.net/hswuhdj4/3

固定!! 造成这个问题的原因是本地snap.svg.js文件。使用链接 raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg-min.js 更改目录为我解决了问题。

有谁知道这是怎么发生的？

Answer 1

变换通常需要2个参数。即你可以给它4个。

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

Snap SVG：使用'for loop'转换/平移x位置

1 个答案: