<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>
-
Так уж заведено в этой вселенной, что если взять две плиточки и отодвинуть их друг от друга, то между ними появится "пустое пространство". А если эти две плиточки ещё и лежат на пушистом, белом снегу, то "пространство между ними будет белым".– user35528629 дек 2019 в 1:33
1 ответ
Фрагмент вашего кода, где задается конфигурация патерна:
<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>
-
1
-
@MaximLensky Этот пример ещё 4 месяца назад работал в FF, значит опять очередные браузерные ""улучшения"" виной тому. 29 дек 2019 в 7:36