Стилирование повторяющегося фона svg с помощью css

Question

Я просматриваю интернет в течение 4 часов, и я не могу найти решение для своей задачи.

Я просто хочу установить svg-изображение в качестве фона и повторить его. Я не мог понять, как применять background-repeat и т. Д. Кроме того, я хочу, чтобы иметь возможность стирать границу svg с помощью css и/или JS, изменяя границы цветов раз в минуту с левой стороны div в правой части div. Единственное, что я знаю об этом: svg border называется stroke, но я не знаю, как использовать эту информацию.

Это то, что я до сих пор:

<div id="test"> 

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 

     <path d="M69.527,2H29.971L2,29.971v39.558L29.971,97.5h39.558L97.5,69.527V29.972L69.527,2z M95.625,68.898L68.898,95.625H31.101 L4.375,68.898V31.516v-0.414L31.102,4.375h37.796l26.728,26.727L95.625,68.898L95.625,68.898z"/> 
     <path d="M68.07,6.375H31.93L6.375,31.93v36.142L31.93,93.626h36.142L93.625,68.07V31.93L68.07,6.375z"/> 

    </svg> 

</div> 

и CSS

body { 
    background: rgba(55, 55, 55, 1); 
} 

#test { 
    width: 70%; 
    height: 150px; 
    margin: 0 auto; 
    border: 2px solid white; 
} 

CodePen

Answer 1

Если вы хотите использовать background-repeat для плитки вашего SVG, вам нужно будет сохранить SVG в отдельном файле (с соответствующими заголовками SVG и пространством имен) и использовать его как background-image. Представленный вами код не имеет SVG в качестве фона, он имеет SVG как элемент в основном документе. Свойство повтора фона больше не влияет на SVG в этом случае, чем на элемент <img>.

В качестве альтернативы (если вы хотите избежать отдельных файлов), вы можете заставить SVG заполнить весь div, а затем использовать SVG <pattern>, чтобы нарисовать графику. Я уверен, что вы можете найти примеры синтаксиса, ища «шаблоны SVG».

Наличие свойства стиля каждого изменения плитки постепенно слева направо невозможно в любой из этих ситуаций. Оба background-repeat и <pattern> обеспечивают эффективное повторение графика, повторяя его точно, так что вы не можете изменить одну плитку в другое время от других плиток.

Если эффект действительно важно для вас, подход, скорее всего, добиться успеха будет

1. сделать весь повторяющийся узор в SVG
2. создать линейный градиент, определенный в userSpaceOnUse единицах для цвета переход, и использовать это в качестве свойства хода
3. анимировать градиент с помощью SMIL анимации (не будет работать в IE) или JavaScript (больше работы и больше стока CPU)

Однако вам нужно будет создать повторяющийся шаблон напрямую или, возможно, с элементами <use> (я не тестировал), а не <pattern>. В качестве альтернативы вы можете создать два шаблона: один для заполнения и один для штриха (в белом) и использовать результаты шаблона штриха в качестве маски для прямоугольника, заполненного полностью градиентом.

Ничто из этого не явилось бы примером для начинающих SVG, но если вы его заработаете, вы узнаете многое о SVG.