3

Я пытаюсь создать разделитель SVG, который проходит между двумя растровыми изображениями. Я искал повсюду, и единственное, что мне подошло бы, вот этот ответ.

Однако ответ зависит от использования body (не такая уж большая проблема), а также без учета динамического содержимого, которое может увеличить высоту содержимого любого раздела. Любое другое решение, которое я нашел, основано на сплошном цвете, обычно белом. Решение вообще возможно?

Пример того, чего я пытаюсь достичь:

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

Свободный перевод вопроса SVG divider between two images от участника @Mechwd.

1

1 ответ 1

3

Пошаговое решение:

Шаг #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.

Ваш ответ

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

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