Question

我试图将SNAP svg脚本放入div中，并且我不知道该怎么做。现在这里是我正在使用的HTML：

<!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中吗？我阅读了文档，并尝试了一些方法，但我的结果是徒劳的。任何帮助都有很大的帮助。

Answer 1

你可以在div中添加一个svg标签并附加到它，所以它看起来像......

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

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

示例jsfiddle here在div上显示上面的css。

如何将带有SNAP svg的脚本放入div中

1 个答案: