如何将动画 SVG 定位在 Foundation 6 元素后面?
How to position animated SVG behind Foundation 6 element?
我想知道是否有办法使用 Foundation 网格,然后在其他元素的前面或后面添加另一个大于 columns/rows 的元素。大对象是背景的一部分,但它是一个动画 svg,所以我不能只将它设置为背景。
CodePen中有两个例子。第一个(顶部)是带有 Foundation 网格的那个,我正在尝试将这个大的、白色的、大部分透明的 svg 圆圈添加到其中。第二个(底部)示例没有 Foundation 网格,但显示了应有的背景圆圈 (#bg-circle)。
我想可能有一些方法可以用 z-index 来做,但我没有运气。
<!-- See the CodePen -->
如果你想放置一个SVG作为背景,设置一个更大的容器,然后在上面覆盖foundation的网格系统。例如:
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%;
}
为您的 SVG 制作动画 并将其设置为背景
您问题的重要内容:这里有一个 link 的 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;}
我想知道是否有办法使用 Foundation 网格,然后在其他元素的前面或后面添加另一个大于 columns/rows 的元素。大对象是背景的一部分,但它是一个动画 svg,所以我不能只将它设置为背景。
CodePen中有两个例子。第一个(顶部)是带有 Foundation 网格的那个,我正在尝试将这个大的、白色的、大部分透明的 svg 圆圈添加到其中。第二个(底部)示例没有 Foundation 网格,但显示了应有的背景圆圈 (#bg-circle)。
我想可能有一些方法可以用 z-index 来做,但我没有运气。
<!-- See the CodePen -->
如果你想放置一个SVG作为背景,设置一个更大的容器,然后在上面覆盖foundation的网格系统。例如:
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%;
}
为您的 SVG 制作动画 并将其设置为背景
您问题的重要内容:这里有一个 link 的 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;}