如何將動畫SVG放在Foundation 6元素後面？

Question

我想知道是否有一種方法來使用基礎網格，但也添加另一個元素比前面或後面的其他元素的列/行大。大對象是背景的一部分，但它是一個動畫SVG，所以我不能將它設置爲背景。

CodePen中有兩個例子。第一個（頂部）是基礎網格，我試圖添加這個大的，白色的，大部分透明的svg圓。第二個（底部）示例沒有基礎網格，但是應該顯示背景圓圈（＃bg-circle）。

我認爲可能有某種方式可以用z-index來實現，但我沒有運氣。

See the CodePen here

<!-- See the CodePen -->

Answer 1

動畫的SVG，並將其設置爲背景

爲重要內容的問題：這是一個鏈接到yout展示瞭如何創建一個動畫與Adobe Illustrator的SVG圖像文件UBE教程（但並不必須這樣做的方式，用動畫的只是一個很好的例子）：

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;} 

Answer 2

如果您希望向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%; 
}