出现水平滚动条

Question

我想将两个 SVG 组合在一起。我在她里面制作了一个容器，里面有一排。

该行有一个 class 浮动端，该行有两个容器，每个容器都有一个 SVG。

我更改了 CSS 以获得 SVG 的绝对位置并且它可以工作但是我有一个水平滚动条并且我尝试了很多东西但我没有找到解决方案。

预先感谢您的帮助。

body {
  padding: 0 !important;
  margin: 0 !important;
}

#svg1 {
  position: absolute;
  z-index: 2 !important;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

#svg2 {
  position: absolute;
  z-index: 1 !important;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));

  
}

#svg2 path{
  d:path('M2032.906,316.652c-29.922,11.176-125.248,135.8-176.452-11.575s-65.814-28.162-108.034-59.206-99.488-84.638-69.539-161.431S1754.629-21.08,1754.629-21.08h278.277');
  animation: morph 5s infinite;
}

#svg2:hover path{
  d:path:hover('M2032.906,299.7c-44.543,52.9-130.008,123.125-181.212-24.248s-72.743-22.043-103.274-29.58-81.155-90.923-56.907-164.4,63.116-102.55,63.116-102.55h278.277');
}

@keyframes morph {
  0%, 100%{
    d:path('M2032.906,316.652c-29.922,11.176-125.248,135.8-176.452-11.575s-65.814-28.162-108.034-59.206-99.488-84.638-69.539-161.431S1754.629-21.08,1754.629-21.08h278.277');
  }
  50%{
    d:path('M2032.906,299.7c-44.543,52.9-130.008,123.125-181.212-24.248s-72.743-22.043-103.274-29.58-81.155-90.923-56.907-164.4,63.116-102.55,63.116-102.55h278.277')
  }
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
  </head>
  
  <body>
  <div class="section">
    <div class="container">
    <div class="row float-end">
    <div class="container col-6">
      <svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="362.354" height="397.564" viewBox="0 0 362.354 397.564">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient);
      }
    </style>
    <linearGradient id="linear-gradient" x1="1" y1="0.033" x2="0.422" y2="0.662" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#469295"/>
      <stop offset="1" stop-color="#3cd698"/>
    </linearGradient>
  </defs>
  <path id="Tracé_6" data-name="Tracé 6" class="cls-1" d="M2032.906,316.652c-29.922,11.176-125.248,135.8-176.452-11.575s-65.814-28.162-108.034-59.206-99.488-84.638-69.539-161.431S1754.629-21.08,1754.629-21.08h278.277" transform="translate(-1670.552 21.08)"/>
</svg>
</div>
<div class="container col-6">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="338.882" height="372.679" viewBox="0 0 338.882 372.679">
  <defs>
    <linearGradient id="linear-gradient" x1="1" y1="0.033" x2="0.422" y2="0.662" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#469295"/>
      <stop offset="1" stop-color="#3cd698"/>
    </linearGradient>
  </defs>
  <path id="Tracé_1" data-name="Tracé 1" d="M1999.591,275.825s-101.794,169.041-169.437,0-109.919-45.687-109.919-45.687-93.009-54.824-46.5-159.9,88.781-91.373,88.781-91.373h237.08" transform="translate(-1660.708 21.725)" fill="url(#linear-gradient)"/>
</svg>
    </div>
    
    </div>
</div>
</div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Answer 1

您可以将 left 或 right css 属性添加到您的 svgs。

例如

#svg1 {
  position: absolute;
  z-index: 2 !important;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  right: 0;
}

#svg2 {
  position: absolute;
  z-index: 1 !important;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  right: 0;
}

出现水平滚动条

Horizontal scroll bar appears

html

javascript

css

responsive-design

bootstrap-4