使用JavaScript庫動畫SVG組對象

我創建了一個包含HTML文本的SVG組對象和附加矩形以及foreignObject-SVG元素。我定義了一個動畫函數，該函數在組上的「mousedown」事件上調用。動畫函數對由id指定的元素進行轉換。使用JavaScript庫動畫SVG組對象

哪個部分不起作用。如果我使用：

d3.select("#group").transition()

我可以看到組的x座標改變，但組內的元素不移動。如果我將#Id設置爲foreignObject的Id或它們將移動的矩形。所以我假設我必須要對「組的每個子元素」進行過渡，我不知道該怎麼做。

下面是一個例子，我準備：http://jsfiddle.net/YxfMH/

我也想知道我怎麼可以拖動「整組」與周圍的鼠標。

來源

2013-04-10 karlitos

SVG <g>元素沒有x或y屬性。你可以設置這樣的東西，就像你可以設置一個名爲'foo'的屬性，但它不會有任何效果。如果你想移動一個組，那麼你需要在其上設置一個轉換轉換，例如變換= 「翻譯（10，10）」

// Add a group to the canvas 
var group = svg.append("svg:g") 
    .attr("id", "group") 
    .attr("transform", "translate(10, 10)") 
    .on("mousedown", animate);

和

function animate() { 
    d3.select("#group").transition() 
    .duration(1000) 
    .attr("transform", "translate(100, 100)") 
};

，你需要改變，以獲得this...

來源

2013-04-10 19:03:36

非常感謝您的解釋。但是，如果將值定義爲字符串，我如何使用變量來設置translate（）參數？我怎樣才能得到團隊的實際位置？ – karlitos 2013-04-10 20:26:27

將x和y組件保留在變量中，然後構造適當的字符串。 – 2013-04-10 20:36:00

爲了方便構建字符串，我經常有一個簡單的函數，比如'var translate = function（x，y）{return「translate（」+ x +「，」+ y +「）」}'所以我可以只需調用'translate（x，100）;'..保存鍵入所有這些引號和加號！ – minikomi 2013-04-11 01:48:38

位，您可以訪問直接到SVG元素的矩陣改變位置或旋轉

看這個例子「U.F.O animation」

http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/examples_EN.php?exampleName=ufo_animation_EN

來源

2013-05-07 16:25:12

使用JavaScript庫動畫SVG組對象

回答

相關問題