Разделитель SVG между двумя растровыми изображениями
Я пытаюсь создать разделитель SVG, который проходит между двумя растровыми изображениями. Я искал повсюду, и единственное, что мне подошло бы, вот этот ответ.
Однако ответ зависит от использования body (не такая уж большая проблема), а также без учета динамического содержимого, которое может увеличить высоту содержимого любого раздела. Любое другое решение, которое я нашел, основано на сплошном цвете, обычно белом. Решение вообще возможно?
Пример того, чего я пытаюсь достичь:
Свободный перевод вопроса SVG divider between two images от участника @Mechwd.
Ответы (1 шт):
Автор решения: Alexandr_TT
→ Ссылка
Пошаговое решение:
Шаг #1.
Два изображения добавляются в SVG, одно поверх другого с помощью тега <image>
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1024 683" preserveAspectRatio="none" >
<image transform="translate(0,0)" xlink:href="https://i.stack.imgur.com/dHpEe.jpg"
width="100%" height="100%" />
<image xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" />
</svg>
</div>Шаг #2.
Для разделения двух изображений используется полоса с pattern SVG
В паттерн добавлены фигуры svg для создания рисунка
Ниже добавлен код паттерна:
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1024 683" preserveAspectRatio="none" >
<defs>
<!-- Shapes in SVG added to pattern -->
<pattern id="patt" x="0" y="24" width="160" height="40"
patternUnits="userSpaceOnUse" >
<g fill="black" transform="translate(0,0)" >
<g fill="black" stroke="black" stroke-width="4" >
<path id="path837" d="M19.8 2.4 35 11v17.5l-15 8.8-15.2-8.8V11.1z" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M55.8-17.6 71-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path841" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M91.8 2.4 107 11v17.5l-15 8.8-15.2-8.8V11.1z" id="path845" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M127.8-17.6 143-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path847" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path id="path883" d="m55.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" />
<path d="m127.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" id="path885" />
<path id="path887" d="m5.5-3.9 4 2.4V3l-4 2.4-4-2.4v-4.6z" />
<path d="m80-5.7 4 2.4v4.6l-4 2.4-4-2.4v-4.6z" id="path889" />
<path id="path891" d="m152.7-5.4 4 2.3v4.7l-4 2.3-4-2.3v-4.7z" />
</g>
</pattern>
</defs>
<image transform="translate(0,200)" xlink:href="https://i.stack.imgur.com/dHpEe.jpg" y="-160" width="100%" height="100%"/>
<image xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" />
<!-- Stripe with a pattern -->
<rect fill="url(#patt)" x="0" y="380" width="100%" height="40" fill="black" />
</svg>
</div> Шаг #3.
Добавляем маску, чтобы был виден фоновый рисунок сквозь прорези паттерна.
Как работает маска подробнее здесь
<style>
.container {
width:100vw;
height:100vh;
margin-left: -1em;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1024 683" preserveAspectRatio="none" >
<defs>
<pattern id="patt" x="0" y="24" width="160" height="40"
patternUnits="userSpaceOnUse" >
<g fill="black" transform="translate(0,0)" >
<g fill="black" stroke="black" stroke-width="4" >
<path id="path837" d="M19.8 2.4 35 11v17.5l-15 8.8-15.2-8.8V11.1z" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M55.8-17.6 71-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path841" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M91.8 2.4 107 11v17.5l-15 8.8-15.2-8.8V11.1z" id="path845" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M127.8-17.6 143-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path847" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path id="path883" d="m55.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" />
<path d="m127.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" id="path885" />
<path id="path887" d="m5.5-3.9 4 2.4V3l-4 2.4-4-2.4v-4.6z" />
<path d="m80-5.7 4 2.4v4.6l-4 2.4-4-2.4v-4.6z" id="path889" />
<path id="path891" d="m152.7-5.4 4 2.3v4.7l-4 2.3-4-2.3v-4.7z" />
</g>
</pattern>
<mask id="mask" >
<rect width="100%" height="100%" fill="white" />
<rect fill="url(#patt)" x="0" y="380" width="100%" height="40" fill="black" />
</mask>
</defs>
<image transform="translate(0,200)" xlink:href="https://i.stack.imgur.com/dHpEe.jpg" y="-200" width="100%" height="100%" />
<!-- Add a mask -->
<image mask="url(#mask)" xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" />
</svg>
</div> 
Шаг #4.
Добавляем анимацию перемещения изображения
<image transform="translate(0,200)" xlink:href="https://i.stack.imgur.com/dHpEe.jpg"
y="-160" width="100%" height="100%">
<!-- Animation of moving the image -->
<animateTransform attributeName="transform" type="translate"
begiin="0s" dur="8s" values="0,0; 0,140;0,140;0,0;0,0" repeatCount="indefinite" />
</image>
Полный код ниже:
<style>
.container {
width:100vw;
height:100vh;
margin-left: -1em;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1024 683" preserveAspectRatio="none" >
<defs>
<pattern id="patt" x="0" y="24" width="160" height="40"
patternUnits="userSpaceOnUse" >
<g fill="black" transform="translate(0,0)" >
<g fill="black" stroke="black" stroke-width="4" >
<path id="path837" d="M19.8 2.4 35 11v17.5l-15 8.8-15.2-8.8V11.1z" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M55.8-17.6 71-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path841" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M91.8 2.4 107 11v17.5l-15 8.8-15.2-8.8V11.1z" id="path845" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M127.8-17.6 143-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path847" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path id="path883" d="m55.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" />
<path d="m127.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" id="path885" />
<path id="path887" d="m5.5-3.9 4 2.4V3l-4 2.4-4-2.4v-4.6z" />
<path d="m80-5.7 4 2.4v4.6l-4 2.4-4-2.4v-4.6z" id="path889" />
<path id="path891" d="m152.7-5.4 4 2.3v4.7l-4 2.3-4-2.3v-4.7z" />
</g>
</pattern>
<mask id="mask" >
<rect width="100%" height="100%" fill="white" />
<rect fill="url(#patt)" x="0" y="382" width="100%" height="40" fill="black" />
</mask>
</defs>
<image transform="translate(0,200)" xlink:href="https://i.stack.imgur.com/dHpEe.jpg" y="-160" width="100%" height="100%">
<!-- Animation of moving the image -->
<animateTransform attributeName="transform" type="translate" begiin="0s" dur="8s" values="0,0; 0,140;0,140;0,0;0,0" repeatCount="indefinite" />
</image>
<!-- Add a mask -->
<image mask="url(#mask)" xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" >
</svg>
</div> Шаг #5.
Анимация деталей изображений
Animating image details.
Анимируется SVG фильтр feTurbulence для оживления деталей растровых изображений
Заметьте, что этот шаг не обязателен, так как применение анимации фильтра ресурсоемко
(Но выглядит, на мой взгляд красиво)
<style>
.container {
width:100vw;
height:100vh;
margin-left: -1em;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1024 683" preserveAspectRatio="none" >
<defs>
<pattern id="patt" x="0" y="24" width="160" height="40"
patternUnits="userSpaceOnUse" >
<g fill="black" transform="translate(0,0)" >
<g fill="black" stroke="black" stroke-width="4" >
<path id="path837" d="M19.8 2.4 35 11v17.5l-15 8.8-15.2-8.8V11.1z" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M55.8-17.6 71-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path841" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M91.8 2.4 107 11v17.5l-15 8.8-15.2-8.8V11.1z" id="path845" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path d="M127.8-17.6 143-9V8.6l-15 8.8-15.2-8.8V-8.9z" id="path847" transform="matrix(.9988 0 0 .95561 0 1.7)" />
<path id="path883" d="m55.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" />
<path d="m127.5 28.1 4 2.4V35l-4 2.4-4-2.4v-4.6z" id="path885" />
<path id="path887" d="m5.5-3.9 4 2.4V3l-4 2.4-4-2.4v-4.6z" />
<path d="m80-5.7 4 2.4v4.6l-4 2.4-4-2.4v-4.6z" id="path889" />
<path id="path891" d="m152.7-5.4 4 2.3v4.7l-4 2.3-4-2.3v-4.7z" />
</g>
</pattern>
<mask id="mask" >
<rect width="100%" height="100%" fill="white" />
<rect fill="url(#patt)" x="0" y="380" width="100%" height="40" fill="black" />
</mask>
<filter id="fl">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" result="turbulence" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="10" in="SourceGraphic" in2="turbulence" />
</filter>
</defs>
<image filter="url(#fl)" transform="translate(0,200)" xlink:href="https://i.stack.imgur.com/dHpEe.jpg" y="-160" width="100%" height="100%" overflow:hidden; >
<animateTransform attributeName="transform" type="translate" begiin="0s" dur="8s" values="0,0; 0,140;0,140;0,0;0,0" repeatCount="indefinite" />
</image>
<image filter="url(#fl)" mask="url(#mask)" xlink:href="https://i.stack.imgur.com/a0IAG.png" y="230" width="100%" height="108%" />
</svg>
</div>
<script>
// Animated SVG filter `feTurbulence` to animate bitmap details
var img = document.querySelector("#fl feTurbulence");
var frames = 0;
var rad = Math.PI / 360;
function AnimateBaseFrequency() {
bfx = .04;
bfy = .04;
frames += 3;
bfx += 0.01 * Math.sin(frames * rad);
bfy += 0.01 * Math.cos(frames * rad);
bf = bfx.toString() + ' ' + bfy.toString();
img.setAttributeNS(null, 'baseFrequency', bf);
window.requestAnimationFrame(AnimateBaseFrequency);
}
window.requestAnimationFrame(AnimateBaseFrequency);
</script>Свободный перевод ответа от участника @Alexandr_TT.