时间戳

首页 > 解决方案 > 在 SVG 背景中放置一个导航栏

html - 在 SVG 背景中放置一个导航栏

问题描述

我想将此 SVG 作为我的标题背景，并在此 SVG 内部或顶部放置一个徽标和导航栏。

SVG 代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1366 420" style="enable-background:new 0 0 1366 420;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#DBDBDC;}
    .st1{fill:#8B8BFF;}
    .st2{fill:#8C8BFF;}
</style>
<path class="st0" d="M5.14,236.82l1361,6.25v61.72c0,0-335,135.16-690,85.24c-161.14-22.66-465-82.3-676-100.68"/>
<path class="st1" d="M839.14,210.25"/>
<path class="st2" d="M0.14,278.23l0-278.13l1366,0v290.63c0,0-312,148.44-750.5,75.39C278.57,309.97,0.14,278.23,0.14,278.23z"/>
</svg>

我的标题代码：

<div class="d-flex container-fluid">
      
        <div class="col-2">
            <div><a href="#"><img src="images/Logo-1.png" /></a></div>
        </div>
        <div class="col-8 ">
        <ul class="navbar navbar-default" >
            <li>Home</li>
            <li>Link1</li>
            <li>Link2</li>
    
            <li class="dropdown">
      <a href="#" class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
            
       </ul>
        
        </div>
        <div class="col-2">
        <div><button class="button" >My Account</button> </div>
        </div>
    </div>

我尝试了很多方法来将此标头代码放在 SVG 上，但没有奏效。

如果有人能提出一种更好的方法而不是使用 SVG，它会像这个一样工作，那也将不胜感激。

提前致谢，抱歉我的英语不好

这是我到目前为止所做的

<div class="header__navbar">

<div class="svg-background-class">

        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 viewBox="0 0 1366 420" style="enable-background:new 0 0 1366 420;" xml:space="preserve">
    
            <path class="st0" d="M5.14,236.82l1361,6.25v61.72c0,0-335,135.16-690,85.24c-161.14-22.66-465-82.3-676-100.68"/>
            <path class="st1" d="M839.14,210.25"/>
            <path class="st2" d="M0.14,278.23l0-278.13l1366,0v290.63c0,0-312,148.44-750.5,75.39C278.57,309.97,0.14,278.23,0.14,278.23z"/>
        </svg>

</div>

<!-- header--> 
    <div class="d-flex container-fluid">
      
        <div class="col-2">
            <div><a href="#"><img src="images/Logo-1.png" /></a></div> <!-- Logo Here -->
        </div>
        <div class="col-8 "> <!-- menu Here -->
            
        
        </div>
        
    </div>

标签： htmlcsssvg

解决方案

这可以通过多种方式完成，因为您可以使用元素的位置。我已经写了伪代码和评论，请检查，如果不清楚，我会尝试再次解释。

<div class="header__navbar"> // this is position relative
<div class="svg-background-class"></div>//this is position absolute with right 0;
<div class="d-flex container-fluid">
      
        <div class="col-2">
            <div><a href="#"><img src="images/Logo-1.png" /></a></div>
        </div>
        <div class="col-8 ">
        <ul class="navbar navbar-default" >
            <li>Home</li>
            <li>Link1</li>
            <li>Link2</li>
    
            <li class="dropdown">
      <a href="#" class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
            
       </ul>
        
        </div>
        <div class="col-2">
        <div><button class="button" >My Account</button> </div>
        </div>
    </div>
</div>

推荐阅读