出现水平滚动条

Question

I would like to combine two SVG on each other.我想将两个 SVG 组合在一起。 I have made a section within her a container who has a row.我在她里面做了一个容器，里面有一排。

The row have a class float-end and the row have two containers with each one SVG.该行有一个 class 浮头，该行有两个容器，每个容器有一个 SVG。

I changed the CSS for having a position absolute for SVG and it's work but I have a horizontal scroll bar and I tried many things but I don't find the solution.我将 CSS 更改为具有 SVG 的 position 绝对值，它可以工作，但我有一个水平滚动条，我尝试了很多东西，但我没有找到解决方案。

Thank you in advance for your help.预先感谢您的帮助。

 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

You can add a left or right css property to your svgs.您可以向 svgs 添加left或right css 属性。

eg例如

#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;
}

出现水平滚动条

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-03-04 21:51:00

出现水平滚动条

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-03-04 21:51:00

解决方案1
2 已采纳 2022-03-04 21:51:00