5

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox='0 0 150 150' preserveAspectRatio='none' >
 <defs>
      <pattern id="outerPattern"
             x="0" y="0" width="20" height="20"
             patternUnits="userSpaceOnUse">
           
               <rect x="0" y="0" width="10" height="10" fill='red'/>
               <rect x="10" y="10" width="10" height="10" fill='black'/>
           
    </pattern> 
</defs>
 <rect x="0" y="0" width="100%" height="100%" style="fill: url(#outerPattern); stroke: #000000;"/>
</svg>

1
  • Так уж заведено в этой вселенной, что если взять две плиточки и отодвинуть их друг от друга, то между ними появится "пустое пространство". А если эти две плиточки ещё и лежат на пушистом, белом снегу, то "пространство между ними будет белым".
    – user355286
    29 дек 2019 в 1:33

1 ответ 1

3

Фрагмент вашего кода, где задается конфигурация патерна:

 <pattern id="outerPattern"
             x="0" y="0" width="20" height="20"
             patternUnits="userSpaceOnUse">
               <rect x="0" y="0" width="10" height="10" fill='red'/>
               <rect x="10" y="10" width="10" height="10" fill='black'/>
 </pattern>

Посмотрите на поясняющий рисунок.

введите сюда описание изображения

Вы задали ширину и высоту 20 x 20 плитки патерна, в который входят 2 цветных квадрата - 10 х 10 и пустое пространство, которое получилось в форме 2 белых квадратов - 10 x 10 Представьте, что такой патерн целиком тоже самое, что одна кафельная плитка с готовым рисунком.
Далее одна плитка патерна с 4 квадратами начинает заполнять фигуру, к которой применен патерн

 <rect x="0" y="0" width="100%" height="100%" style="fill: url(#outerPattern); stroke: #000000;"/>

Заполнение идёт слева направо порядно, когда один ряд будет заполнен, начинает заполняться 2-ой ряд и так до полного заполнения. Более подробно здесь и здесь
Если нужно избавиться от пустых белых квадратов, то нужно прописать два дополнительных прямоугольника.

Например так:

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox='0 0 150 150' preserveAspectRatio='none' >
 <defs>
        <pattern id="outerPattern"
             x="0" y="0" width="20" height="20"
             patternUnits="userSpaceOnUse">
               <rect x="0" y="0" width="10" height="10" fill='red'/>
                <rect x="10" y="0" width="10" height="10" fill='black'/>
			     <rect x="0" y="10" width="10" height="10" fill='black'/>
                  <rect x="10" y="10" width="10" height="10" fill='red'/>
        </pattern> 
</defs>
 <rect x="0" y="0" width="100%" height="100%" style="fill: url(#outerPattern); stroke: #000000;"/>
</svg>

Цвет можно присвоить любой, фигуру в раттерн можно добавить любую, например круги и прямоугольники:

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox='0 0 150 150' preserveAspectRatio='none' >
 <defs>
    <pattern id="outerPattern"
      x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="4" fill="dodgerblue"/>
        <circle cx="15" cy="5" r="4" fill="black"/>
		<circle cx="5" cy="15" r="4" fill="purple"/>
        <rect x="10" y="10" width="10" height="10" fill='red'/>
    </pattern> 
</defs>
 <rect x="0" y="0" width="100%" height="100%" style="fill: url(#outerPattern); stroke: #000000;"/>
</svg>

Примеры анимации с патернами

анимация после клика

<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1400 875" preserveAspectRatio="xMinYMin meet">  
<defs>
 <pattern id="ptn1"
   x="0" y="0" width="22" height="22"
             patternUnits="userSpaceOnUse" >
               
            <g fill="skyblue"  fill-opacity="0.8">
             <rect x="0" y="0" width="2" height="2" >
			 <animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
			   <animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
			 </rect>
	    
	</pattern>		 
</defs>
<image xlink:href="https://i.stack.imgur.com/K37YC.jpg" width="100%" height="100%"  /> 
<rect width="100%" height="100%" fill="url(#ptn1)" />
</svg>	 
</div>

Горизонтальные жалюзи

введите сюда описание изображения

<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1400 875" preserveAspectRatio="xMinYMin meet">  
<defs>
 <pattern id="ptn1"
   x="0" y="0" width="11" height="22"
             patternUnits="userSpaceOnUse" >
               
    <g fill="skyblue"  fill-opacity="0.8">
             <rect x="0" y="0" width="2" height="2" >
			 <animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
			   <animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
			 </rect>
	</g>    
	</pattern>		 
</defs>
<image xlink:href="https://i.stack.imgur.com/K37YC.jpg" width="100%" height="100%"  /> 
<rect width="100%" height="100%" fill="url(#ptn1)" />
</svg>	 
</div>

Вертикальные жалюзи

введите сюда описание изображения

<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1400 875" preserveAspectRatio="xMinYMin meet">  
<defs>
 <pattern id="ptn1"
   x="0" y="0" width="22" height="11"
             patternUnits="userSpaceOnUse" >
           <g fill="skyblue"  fill-opacity="0.8">
             <rect x="0" y="0" width="2" height="2" >
			 <animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
			   <animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
			 </rect> 
			</g> 
	    
	</pattern>		 
</defs>
<image xlink:href="https://i.stack.imgur.com/K37YC.jpg" width="100%" height="100%"  /> 
<rect width="100%" height="100%" fill="url(#ptn1)" />
</svg>	 
</div>

2
  • 1
    и кстати не работает анимация в FF 71.0 29 дек 2019 в 7:32
  • @MaximLensky Этот пример ещё 4 месяца назад работал в FF, значит опять очередные браузерные ""улучшения"" виной тому. 29 дек 2019 в 7:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.