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

【问题标题】：How do I place a script with SNAP svg into a div如何将带有 SNAP svg 的脚本放入 div
【发布时间】：2014-03-25 04:06:36
【问题描述】：

我正在尝试将一个 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 中？我阅读了文档并尝试了几件事，但我的结果是徒劳的。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery html svg

【解决方案1】：

您可以在 div 中放置一个 svg 标签并附加到该标签上，所以它看起来像...

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

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

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

【讨论】：

谢谢伊恩！但是，现在我有另一个问题。当我想在加载了 SVG 的 div 之后添加另一个带有一些文本的 div 时，带有文本的新 div 不会清除，而是出现在 SVG 上方。如何让 div 相互识别并正确清除？我尝试将显示块添加到两个 div，但这似乎不起作用。
你能发一个jsfiddle吗（你可以编辑上面的然后保存）？
这是我的网站peterlum.co/work/SNAP.html 的页面链接。这是一个不同的页面，但我已经从上面的示例中转移了确切的代码。出于某种原因，它在 FF 和 Chrome 中看起来不同，但在 chrome 中重新加载时，加载的 svg 对象由于某种原因也会沿 y 轴移动。最重要的是，您知道我需要做什么才能将它们精确地定位在 div 中，并提供 SVG 属性，以便当前显示在上面的文本的 div 将清除 SVG 对象并显示在下方SVG？希望我的问题有意义。
不确定你的意思是哪个文本，但只是把你想要的 div 放在第一位，放在 html 中？
小提琴来了。资源不在那里，但这基本上是我的代码所拥有的。您会在那里注意到它，或者如果您检查我之前包含的网站中的元素，我在 div 上方有带有 SVG 对象的 div，其中包含 HTML 中的段落和页脚内容，但上面的 SVG 对象仍然出现在那些 2 下方分区。为什么会出现这种情况？我也很难准确定位它。有没有办法调整 SVG 对象在 SVG 标签中的位置？