當地VS絕對座標在Snap.svg

https://jsfiddle.net/foreyez/mfcqx7vw/當地VS絕對座標在Snap.svg

var s = Snap("#svg"); 

var block = s.rect(100, 100, 100, 100, 20, 20); 
block.attr({ 
    fill: "rgb(236, 240, 241)", 
    stroke: "#1f2c39", 
    strokeWidth: 3 
}); 

block.animate({ transform: "T0,0" }, 200);

我想這個盒子轉化爲0,0 - 這將是在屏幕的左上方。但它不動。所以它將我的資本T當作小寫字母t並使用本地座標。我如何得到它絕對使用？

來源

2016-11-22 foreyez

我認爲這裏存在輕微的混亂。轉換已經在0,0。你正在將它完全轉化爲0,0，但它並沒有像已經存在的那樣移動（這只是你的x，y不是這些，而是這些不同的東西）。所以如果你想要將整個形狀移動到0,0，你必須將x，y改爲0,0或者將T-100，-100變換。在方格紙上考慮100,100的平方。您可以在0,0處重繪正方形（更改x，y），也可以將整個方格紙向左移動-100，-100。 https://jsfiddle.net/mfcqx7vw/1/ – Ian

快照已經完全改變了。只是當前的SVG沒有被變換移動，它已經被設置爲x，y。

所以你有2個選擇，爲x，y設置動畫或者爲變換設置動畫，並且只保留x，y。

在DOM中的幕後，一個變換不會改變x，y。它有一個單獨的轉換屬性。這兩者沒有任何聯繫。

block.animate({ transform: "t-100,-100", 200);

jsfiddle

或

block.animate({ x: 0, y: 0 }, 200);

jsfiddle

這取決於你真的正在努力才達到什麼，有沒有正確或錯誤的方式，但如果你想一個解決方案，例如爲圓圈和團體工作（因爲一個圓圈沒有x，y它有cx，cy），那麼變換可能是要走的路。

將svg元素視爲在方格紙上。您可以重新定位方格紙上的元素，也可以移動整個方格紙。

現在，如果您確實想要進行相對變換，首先必須對其進行相對變換（否則相對於默認值0,0左上角）。

因此，如果我們開始創建一個矩形，而無需使用X，Y和使用變換的t100,100將其移動到同一個地方

var block = s.rect(0, 0, 100, 100, 20, 20).transform('t100,100');

jsfiddle

然後，您可以將它相對於該初始變換定位，通過首先包括現有變換。因此，它看起來像......

block.animate({ transform: block.transform() + "t-100,-100" }, 200);

jsfiddle

這將相對會-100，-100更多的將它移動到左側，向上。

如果你想絕對的，這將是..

block.animate({ transform: "t0,0", 200);

來源

2016-11-23 12:45:11 Ian

我明白了。感謝您的詳細解答。 – foreyez

當地VS絕對座標在Snap.svg

回答

相關問題