Как расположить анимированный SVG за элементом Foundation 6?

Мне интересно, есть ли способ использовать сетку Foundation, а затем добавить еще один элемент, который больше, чем столбцы/строки впереди или позади других элементов. Большой объект является частью фона, но это анимированный svg, поэтому я не могу просто установить его в качестве фона.

В CodePen есть два примера. Первый (верхний) — это тот, в котором есть сетка Foundation, к которой я пытаюсь добавить этот большой белый, в основном прозрачный круг svg. Второй (нижний) пример без базовой сетки, но отображает фоновый круг (#bg-circle), как и должно быть.

Я думал, что может быть какой-то способ сделать это с помощью z-index, но мне не повезло.

см. CodePen здесь

<!-- See the CodePen -->


svg css grid zurb-foundation zurb-foundation-6
person mrseanbaines    schedule 03.12.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Анимируйте SVG и установите его в качестве фона

Важное содержание для вашего вопроса: Вот ссылка на учебник YouTube, показывающий, как создать анимацию файла изображения SVG с помощью Adobe Illustrator (но это не обязательно сделать так, просто хороший пример использования анимации):

ссылка на YouTube, посвященная созданию и анимации файла svg

А вот документация Mozilla по анимации с примером использования элемента animateTransform:

документация Mozilla SVG animateTransform

<?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 с использованием выноски с фоновым изображением svg

Вот пример 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;}
person Chris O    schedule 06.12.2016
comment
Потрясающе, спасибо! Я не знал, что вы можете анимировать в HTML! - person mrseanbaines; 07.12.2016

arrow_upward
1
arrow_downward

Если вы хотите разместить 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%;
}
person elicohenator    schedule 04.12.2016
comment
Хорошо, милая. Это поставило его в правильное положение. Но теперь верхняя часть сжимается, чтобы соответствовать соответствующему контейнеру. Как вернуть исходный контейнер к установке высоты на основе его содержимого? Возможно, не самое лучшее описание. См. codepen: codepen.io/mrseanbaines/pen/dOdoEy. - person mrseanbaines; 04.12.2016
comment
вы должны дать им обоим желаемую высоту: 100% / 100vh - person elicohenator; 04.12.2016