主页 / 问题 / 1104673
Accepted
EgorG
Asked:2020-04-03 04:26:10 +0000 UTC2020-04-03 04:26:10 +0000 UTC

svg 背景图片

  • 772

请帮我处理svg。
我想全屏制作背景 svg 图像（类 .canvas）。
它将由分散在屏幕周围的几个元素组成，其中之一是波浪（.waves 类），它们应该位于屏幕的底部边缘并占据大约 15%，但它们只是简单地拉伸到屏幕。
请告诉我如何解决这个问题，我怀疑是这种情况viewBox，但我试图改变它使情况变得更糟。

  .canvas {
        display: block;
        width: 100%;
        height: 100vh;
        background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
    }
    .waves {
        display: block;
        width: 100%;
        height: 15%;
        background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
    }
 <svg className='canvas'>
            <svg className="waves"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 25 150 28"
                preserveAspectRatio="none">
                <defs>
                    <path 
                        id="gentle-wave"
                        d="m -150,44.4 c 30,0 58,
                            -18 87.7,-18 30.3,0 58.3,
                            18 87.3,18 30,0 58,-18 88,
                            -18 30,0 58,18 88,18 l 0,
                            34.5 -351,0 z" />
                </defs>
                <g className="parallax">
                    <use xlinkHref="#gentle-wave" x="50" y="0" fill="rgb(68,88,129)"/>
                    <use xlinkHref="#gentle-wave" x="50" y="3" fill="rgb(30,42,73)"/>
                    <use xlinkHref="#gentle-wave" x="50" y="6" fill="rgb(37,50,80)"/>  
                </g>
                
            </svg>
        </svg>

html

1 个回答

  1. Best Answer

    Waves（.waves 类），它们应该位于屏幕底部并占据大约 15%，但它们只是简单地拉伸到屏幕的整个高度。

    为了使svg具有自适应性，占据父容器的整个空间，在你的例子中就是all footer，必须是headerviewBox中的svg只有并且svg的宽度和高度必须被删除或指定在相对单位。这个要求得到满足 -width并且height不存在。

    修复了 SVG 语法中的一些不准确之处，显然它是为 React 编写的<use xlinkHref。你需要为 svg 写xlink:href

    要将页脚压到底部并使页面响应，flex请参阅 CSS

    我认为最好不要使用背景添加SVG。如果它用作图片，那为什么需要它。不会有交互性和其他 SVG 好东西。

    我在页脚中添加了内联 SVG 波浪，它们将完全填充它，但不会超出它 - 高度的 15%。此外，这使得它们可以动画化，请参见第二个选项。

    静态选项 

    html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}

/* temp styles */
.header  {
height:15%;
color:white;
font-size:48px;
text-align:center;
  background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107)); 
}
.content {
color:black;
font-size:24px;
text-align:center;
height:90%;
  background: #d3d3d3;
}
.footer {
color:white;
font-size:16px;
text-align:center;
  background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107)); 
  height:15%;
}
    <body>
    <div class="wrapper">
        <div class="header">Header</div>
        <div class="content">Content</div>
    </div>
    <div class="footer">footer
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" class='waves'
                   xmlns="http://www.w3.org/2000/svg"
            viewBox="0 25 150 28"
            preserveAspectRatio="xMinYMin meet">
            <defs>
                <path 
                    id="gentle_wave" 
                    d="m -150,44.4 c 30,0 58,
                        -18 87.7,-18 30.3,0 58.3,
                        18 87.3,18 30,0 58,-18 88,
                        -18 30,0 58,18 88,18 l 0,
                        34.5 -351,0 z" >
               	</path>						
						
           </defs>
              <g class="parallax">
                <use xlink:href="#gentle_wave" fill="#4C6294" x="50" y="0" />
                <use xlink:href="#gentle_wave" fill="#526AA0" x="150" y="3" />
                <use xlink:href="#gentle_wave" fill="#5F7CBB" x="100" y="3" />  
            </g> 
        </svg>
	</div>
</body>

    动态选项

    添加波浪动画 

    <animateTransform attributeName="transform" type="translate" begin="0s" dur="12s" values="0,0;80,0;50,0;0,0" repeatCount="indefinite" />


    html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}

/* temp styles */
.header  {
height:15%;
color:white;
font-size:48px;
text-align:center;
  background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107)); 
}
.content {
color:black;
font-size:24px;
text-align:center;
height:90%;
  background: #d3d3d3;
}
.footer {
color:white;
font-size:16px;
text-align:center;
  background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107)); 
  height:15%;
}
    <body>
    <div class="wrapper">
        <div class="header">Header</div>
        <div class="content">Content</div>
    </div>
    <div class="footer">footer
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" class='waves'
                   xmlns="http://www.w3.org/2000/svg"
            viewBox="0 25 150 28"
            preserveAspectRatio="xMinYMin meet">
            <defs>
                <path 
                    id="gentle_wave" 
                    d="m -150,44.4 c 30,0 58,
                        -18 87.7,-18 30.3,0 58.3,
                        18 87.3,18 30,0 58,-18 88,
                        -18 30,0 58,18 88,18 l 0,
                        34.5 -351,0 z" >
                 <animateTransform attributeName="transform" type="translate" begin="0s" dur="12s" values="0,0;80,0;50,0;0,0" repeatCount="indefinite" />
				</path>						
	           </defs>
              <g class="parallax">
                <use xlink:href="#gentle_wave" fill="#4C6294" x="50" y="0" />
                <use xlink:href="#gentle_wave" fill="#526AA0" x="150" y="3" />
                <use xlink:href="#gentle_wave" fill="#5F7CBB" x="100" y="3" />  
            </g> 
        </svg>
		</div>
</body>

    • 5

相关问题