Question

我正在尝试在网页的整个body元素中为一些SVG圈设置动画，但是当它们到达<%= yield %>的{{1}}时，它们似乎会被截断RoR应用程序。

application.html.erb 如下所示，

application.html.erb

动画气泡的D3.js脚本 _bubbles.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>KegCop</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <%= favicon_link_tag 'favicon.ico' %>
  <%= render 'layouts/ie_shim' %>
</head>
<body>
  <%= render 'layouts/nav' %>
  <div id="container-fluid">

    <%= render 'layouts/bubbles' %>

    <%= yield %>

    <%= render 'layouts/footer' %>

  </div>
<%= render 'layouts/google_analytics' %>
<%= render 'layouts/beer_background' %>
<%= audio_tag("/audios/bottle-open.ogg", autoplay: true, controls: false) %>


</body>
</html>

更新

以下是我希望看到的内容，但它正在我正在使用的网页上的表单元素的底部剪掉。

http://jsfiddle.net/ipatch/4C8c8/8/

Answer 1

我最终将<div id="container-fluid">更改为<div class="wrapper">并将wrapper CSS样式更改为position: absolute，现在“起泡”/ SVG圈子在整个{{{} 1}}页面的元素。

关键是将包装类设置为绝对位置。

动画圈使用带有Ruby on Rails的D3.js进行裁剪

1 个答案: