我如何用SNAP SVG腳本到一個div

我試圖把一個SNAP SVG腳本到一個div和我失去了作爲我應該怎麼做。現在這裏是我一起工作的HTML：我如何用SNAP SVG腳本到一個div

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>OH SNAP SVG 2014</title> 
<script src="Snap.svg-0.1.0/dist/snap.svg-min.js"></script> 
<style> 
body{ 
    background:#FFF; 
} 
</style> 

</head> 

<body> 

<script> 



var paper= Snap(700,600); 






var c = paper.image("clock machine.svg", 200,100,500,480); 



var b = paper.image("new years ball.svg", 406,20,200,200); 



var p = paper.image("button.svg", 258,508,35,35); 



var l = paper.image("lights.svg",406,20,200,200); 





var g = paper.group(b,l); 

var clickFunc= p.click 
g.transform("R90"); 
p.click(function(){ 
     g.animate({transform : "t0,227" }, 5000, mina.easein); 
     T.animate({transform : "t-2557,0,"}, 4900,mina.linear); 
}); 


    g.attr({x:250}) 






var T = paper.image("LCD Text.svg", 620,453,2500,85).attr({ 
fill: "#3FFF9B" 

}); 

var c = paper.rect(365, 454, 263, 85, 3).attr({mask:T, 
fill:"#3FFF9B" 
}); 




</script> 

</body> 
</html>

這是我到目前爲止所。有誰知道我會如何專門把這個成div？我閱讀了文檔並嘗試了一些東西，但是我的結果是徒勞的。任何幫助將非常有義務。

來源

2014-03-25 user3208676

你可以把一個SVG標籤的DIV中，重視的是，所以它看起來是這樣的......

<div id="mydiv"> 
    <svg id="mysvg"></svg> 
</div> 

s = Snap("#mysvg"); 
s.rect(100,100,200,200);

例子的jsfiddle here顯示上的DIV + CSS以上。

來源

2014-03-25 16:19:06 Ian

謝謝伊恩！但是，現在我有另一個問題。當我想在加載SVG的div後添加另一個帶有文本的div時，帶有文本的新div不會清除，而是出現在SVG上方。我怎樣才能讓div識別對方並正確清除？我試圖將顯示塊添加到兩個div，但這似乎不起作用。 – user3208676

你可以發佈一個jsfiddle（你可以編輯上面的然後保存）？ – Ian

這是從我的網站http://peterlum.co/work/SNAP.html的頁面鏈接。它是一個不同的頁面，但我已經從上面的示例中轉移了確切的代碼。由於某些原因，它在FF和Chrome中看起來不同，但是當以鉻重新加載時，加載的svg對象也沿着y軸移動出於某種原因。最重要的是，你知道我需要做些什麼才能將它們精確地定位在div中，並且還要提供SVG屬性，以便當前顯示的文本的div將清除SVG對象並顯示在SVG？希望我的問題有道理。 – user3208676

我如何用SNAP SVG腳本到一個div

回答

相關問題