时间戳

首页 > 解决方案 > 背景之间的svg水平线

javascript - 背景之间的svg水平线

问题描述

.left-wave-container {
  line-height: 0 !important;
  width: 100%;
  height: 100%;
}

.container {
  width: 100vw;
  height: 50vh;
  background: #2196f3;
}
<div className="left-wave-container">

    <div className="svg-container">
      <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="430" viewBox="0 0 1280 430"><path d="M0,465V35A96.575,96.575,0,0,0,.64,46.15,94.294,94.294,0,0,0,2.56,56.94C15.71,112.271,78.9,153.52,171,186.521v.159c116.77,41.85,280,70.44,446.67,97.681,6,1,12,2,18,2.93C682.9,295,730.32,302.6,776.9,310.43c3.73.61,7.45,1.25,11.16,1.87,2.72.46,5.431.93,8.131,1.37l7.59,1.291,2.05.35c5.07.869,10.139,1.74,15.179,2.62C890.64,330,957.62,342.71,1018.56,357c5.45,1.29,10.86,2.569,16.21,3.88q13.49,3.28,26.54,6.7,7.53,2,14.9,4l1.2.329c5.65,1.53,11.2,3.1,16.691,4.691,1.2.329,2.36.68,3.54,1,81,23.559,145.33,51.53,182.08,86.95l.28.26V465Z" transform="translate(0 -35)" fill="#2196f3"/>
      </svg>
    </div>

    <div className="container">
    </div>

</div>

我正在尝试将一个 svg 标题与具有相同背景颜色的波浪组合在一起，但在底部的特定视口大小中，它们之间显示一行。

一件奇怪的事情是，当我不改变 CSS 或直接在 svg 中的高度宽度时，水平线会消失，但它只是开始的大小，没有完整的视口（当我上传片段时我意识到了这一点）。

感谢阅读！

标签： javascripthtmlsvgsize

解决方案

把你的波浪卷进来Inkscape

从标记中删除 SVGwidth =" 1280" height ="430"

现在应用程序将在任何屏幕分辨率下自适应。

样式不起作用，因为有<div className =" container ">

<div class =" container ">正确书写

.left-wave-container {
    width: 100%;
  height: 100%;
  line-height: 0 !important;
}

.container {
  width: 100%;
  height: 100%;
  background: #2196f3;
}
<div class="left-wave-container">

    <div class="svg-container">
      <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 1280 430">
	  <path d="m2.7 20.4c-1.2-35.4-1.3 4.9 17.7 35.5 19.1 30.6 57.4 52.9 91.9 68.1 130.2 56.1 261.7 80.2 377.8 101.5 187.9 32.6 388.1 61.4 560.4 103 39.4 9.7 74.8 18.1 117.1 33.6 37.9 13.9 135.6 67.5 100.7 67.1C995.4 425.3 1.6 425.3 1.6 425.3c0 0 2.1-377.7 1.2-404.9z" transform="translate(0 5)"  fill="#2196f3" stroke="#2196f3" stroke-width="10"/>
      </svg>
    </div>

    <div class="container">
    </div>

</div>

推荐阅读