Как поместить скрипт с SNAP SVG в div

0

Я пытаюсь поместить скрипт 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? Я прочитал документацию и попробовал пару вещей, но мои результаты были бесполезны. Любая помощь была бы очень обязательна.

Теги:
svg

1 ответ

1

Вы можете поместить тэг svg внутри div и прикрепить к нему, чтобы он выглядел как...

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

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

Пример jsfiddle здесь показывает выше с помощью css на div.

  • 0
    Спасибо Ян! Однако сейчас у меня другая проблема. Когда я хочу добавить еще один div с некоторым текстом после div с загруженным SVG, новый div с текстом не очищается и вместо этого появляется над SVG. Как я могу заставить div'ы узнавать друг друга и правильно очищать? Я попытался добавить блок отображения к обоим div, но это не работает.
  • 0
    Не могли бы вы опубликовать jsfiddle (вы можете отредактировать приведенный выше, а затем сохранить)?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню