缩放时如何保留svg片段路径的长宽比

问题描述

前言

我有一个部分，内容在内容的底部和末端具有渐变背景和波浪。通常，我会将每个波形导出为svg，并将其保存在:before和:after元素中，以便可以在不同视口中很好地缩放。但是，由于需要所有元素上的渐变，因此选择了剪切路径。

问题：

当前，由于高度是自动的（取决于内容），因此在较小的视口处，波浪会更大。有没有办法缩放海浪？我尝试将剪辑路径缩放为较小，但这会使背景较小，因此某些内容消失了。

Codepen：

https://codepen.io/ainsleyclark/pen/MWyeNQo?editors=1100

section {
  background: #fbbe34;
  background: linear-gradient(144deg,blue 0%,#719dc6 100%);
  clip-path: url(#wave-clippath);
  -webkit-clip-path: url(#wave-clippath);
  height: auto;
  display: flex;
  align-items: center;
  padding: 100px;
}

    <!-- Wave  - Clippath -->
    <svg width="0" height="0" preserveAspectRatio="none">
        <clipPath id="wave-clippath" clipPathUnits="objectBoundingBox">
            <path d="M0.895,1 c-0.061,-0.123,-0.006,-0.184,-0.019 c-0.039,-0.008,-0.079,-0.019,-0.117,-0.029 h0 l0,0 h0 c-0.043,-0.011,-0.087,-0.023,-0.131,-0.032 a2,10,-0.078,-0.011 a3,-0.004 c-0.026,-0.052,0.001,0.004 a2,-0.077,0.011 a2,9,-0.076,0.018 C0.05,0.945,0.024,0.954,0.963 V0.83 h1 V0.83 H0 V0.17 h1 v0 H0 V0.006 C0.034,0.002,0.07,0.105,0 c0.061,0.123,0.006,0.184,0.019 c0.039,0.008,0.079,0.018,0.117,0.029 h0 l0,0 h0 l0,0 c0.043,0.011,0.087,0.023,0.131,0.032 a2,0.078,0.011 a3,0.004 c0.026,0.052,-0.001,-0.004 c0.026,-0.002,0.077,-0.011 a2,0.076,-0.018 c0.025,-0.007,0.05,-0.015,0.075,-0.024 V0.994 c-0.034,0.004,-0.07,-0.105,0.006"></path>
        </clipPath>
    </svg>

<section class="section">
  <div class="text">
    nunc. Ut pellentesque interdum arcu,vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum,ut rutrum augue. Ut egestas volutpat nulla,efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.

Morbi pellentesque rhoncus diam,non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.

Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod,a pharetra lacus dapibus. Etiam tristique posuere turpis,nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat,consectetur sit amet elementum vulputate,vestibulum ac ex. Phasellus vel neque ac lectus molestie 
        nunc. Ut pellentesque interdum arcu,vestibulum ac ex. Phasellus vel neque ac lectus molestie
        nunc. Ut pellentesque interdum arcu,vestibulum ac ex. Phasellus vel neque ac lectus molestiefermentum.
  </div>
</section>

谢谢！

解决方法

我将使用两个SVG和多个蒙版而不是clip-path。

这是我将要使用的SVG。它们与您的不完全相同，但是您可以轻松地对其进行编辑

svg {
  border:2px solid;
}

<svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 17">
    <path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z'  fill="red"/>
  </svg>
  
  <svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 17">
    <path transform="scale(-1)" transform-origin="center" d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z'  fill="red"/>
  </svg>

这是使用上面的内部蒙版的代码。您将需要3层。顶部和底部带有SVG，中间一个带有简单的渐变来填充空间：

section {
  background: linear-gradient(144deg,blue 0%,#719dc6 100%);
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 17'><path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill='white'/></svg>") bottom/100% auto,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 17'><path transform='scale(-1)' transform-origin='center' d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill='white'/></svg>") top/100% auto,linear-gradient(white 0 0) center/100% calc(100% - 2*17vw);
    
  -webkit-mask-repeat:no-repeat;
  

  padding:18vw 50px; /* 18vw is an approximation of the SVG height considering the ratio*/
}

<section class="section">
  <div class="text">
    nunc. Ut pellentesque interdum arcu,vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum,ut rutrum augue. Ut egestas volutpat nulla,efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.

Morbi pellentesque rhoncus diam,non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.

Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod,a pharetra lacus dapibus. Etiam tristique posuere turpis,nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat,consectetur sit amet elementum vulputate,vestibulum ac ex. Phasellus vel neque ac lectus molestie 
        nunc. Ut pellentesque interdum arcu,vestibulum ac ex. Phasellus vel neque ac lectus molestie
        nunc. Ut pellentesque interdum arcu,vestibulum ac ex. Phasellus vel neque ac lectus molestiefermentum.
  </div>
</section>