两个图像之间的 SVG 分隔线答案

【问题标题】：SVG divider between two images两个图像之间的 SVG 分隔线
【发布时间】：2021-12-30 15:18:11
【问题描述】：

我正在尝试创建两个图像之间的 SVG 分隔线。我进行了广泛搜索，唯一接近我需要的是this answer。但是，答案取决于使用正文（问题不大）以及不考虑可以拉伸任一部分内容高度的动态内容。我发现的所有其他解决方案都依赖于纯色，通常是白色。这甚至可能吗？

我想要达到的目标的示例。

【问题讨论】：

标签： html css svg clip-path

【解决方案1】：

分步解决方案

第 1 步。
使用<image> 标签将两张图片添加到 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" >  
 <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 步。

带图案的条带用于分隔两个图像。
向图案添加 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 步。

动画图像细节。

动画 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>

【讨论】：

是否必须在 SVG 标签内添加动态内容（来自 CMS 的一堆 HTML）？
@Mechwd 不，在这个版本中，光栅图像在 SVG 内部。一个可能的解决方案是分隔条何时移动。现在是静态的。我应该考虑这个选项并给出第二个答案吗？
出于我想要使用它的目的，它需要由 CMS 控制图像（在本例中为 Statamic），并且每个部分中的所有页面内容都可变（图片、文字、视频等）。因此，如果您知道如何操作，那将是最有帮助的。