Foundation 6要素の後ろにアニメーションSVGを配置する方法は？

Question

Foundationグリッドを使用する方法があるのですが、他の要素の前または後ろの列/行よりも大きな要素を追加する方法があるのでしょうか。ラージオブジェクトは背景の一部ですが、アニメーション化されたSVGですので、背景として設定することはできません。

CodePenには2つの例があります。最初の（上の）ものは、この大きな、白い、ほとんど透明なsvgサークルを追加しようとしている基盤グリッドを持つものです。 2番目の（下の）例はFoundationグリッドがなく、バックグラウンド円（＃bg-circle）をそのまま表示しています。

私はZ-インデックスでそれを行うにはいくつかの方法があると思っていましたが、私はそれに運がありませんでした。

See the CodePen here

<!-- See the CodePen -->

Answer 1

は、あなたのSVGをアニメーションと背景

として設定します質問：ここにあなたのリンクがありますアニメイトアドビイラストレーターでSVGイメージファイルを作成する方法を示しUBEチュートリアル（しかし、それは、そのように行われるアニメーションを使用してのちょうど良い例を持っていません）：

youtube link tut on svg file creation and animation

そして、ここにanimateTransform要素を使用する例とアニメーションのMozillaのドキュメントです：

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>

をここで

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

背景は十分に容易であるSVG画像を配置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%; 
}