如何将动画 SVG 定位在 Foundation 6 元素后面？

Question

我想知道是否有一种方法可以使用 Foundation 网格，然后还要添加另一个大于其他元素前面或后面的列/行的元素。大对象是背景的一部分，但它是一个动画 svg，所以我不能将它设置为背景。

CodePen 中有两个示例。第一个（顶部）是带有基础网格的那个，我试图将这个大的、白色的、大部分透明的 svg 圆圈添加到其中。第二个（底部）示例没有 Foundation 网格，但显示了应有的背景圆圈 (#bg-circle)。

我认为可能有一些方法可以使用 z-index，但我没有运气。

See the CodePen here

<!-- See the CodePen -->

Answer 1

如果您希望将 SVG 作为背景，请设置一个更大的容器，然后在其上覆盖基础的网格系统。例如：

HTML 结构：

<div id="container">
    <svg>...</svg>
</div>

<div id="row-container">
    <div class="row">
         <div class="columns ..."></div>
    </div>
</div>

还有 CSS：

#container {
    position: relative;
}

#row-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Answer 2

为您的 SVG 制作动画并将其设置为背景

您问题的重要内容：这是一个 youtube 教程的链接，展示了如何使用 adobe illustrator 创建动画 SVG 图像文件（但它没有不必那样做，只是使用动画的一个很好的例子）：

youtube link tut on svg file creation and animation

这里是 Mozilla 动画文档，其中包含使用 animateTransform 元素的示例：

Mozilla SVG animateTransform documentation

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite"/>
    </polygon>
</svg>

将 SVG 图像作为背景非常简单：

codepen using callout with svg background-image

以下是一些 HTML 和 CSS 示例：

<div class="svgEx marg">
    <div class="row">
      <div class="small-2 large-4 columns">Some text here.</div>
      <div class="small-4 large-4 columns">Some more text here.</div>
      <div class="small-6 large-4 columns">Even more text here.</div>
    </div>
    <div class="row">
      <div class="small-2 large-4 columns">Some text here.</div>
      <div class="small-4 large-4 columns">Some more text here.</div>
      <div class="small-6 large-4 columns">Even more text here.</div>
    </div>
    <div class="row">
      <div class="small-2 large-4 columns">Some text here.</div>
      <div class="small-4 large-4 columns">Some more text here.</div>
      <div class="small-6 large-4 columns">Even more text here.</div>
    </div>  
</div>

css:

.svgEx {
  background: url(https://ohdoylerules.com/content/images/css3.svg) no-repeat center center;
  min-height: 500px;
}

.marg { padding: 100px 0;}