svg文件未加载到导航栏上-不确定原因是什么(html、css、引导、js、svg)

n7taea2i  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(219)

我将简要地解释问题是什么，所以我正在开发一个引导网站，我试图在导航栏上使用一个徽标，但是它似乎离一个徽标不远。我已经打开了徽标的svg文件，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="111.196" height="30.566" viewBox="0 0 111.196 30.566">
  <defs>
    <linearGradient id="linear-gradient" x1="0.5" x2="1.275" y2="0.725" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#fe8464"/>
      <stop offset="1" stop-color="#fe6e9a"/>
    </linearGradient>
  </defs>
  <g id="Group_2" data-name="Group 2" transform="translate(-372.804 -44.291)">
    <text id="BASIC" transform="translate(409 68)" fill="#2e2e2e" font-size="24" font-family="Helvetica-Bold, Helvetica" font-weight="700"><tspan x="0" y="0">TEST</tspan></text>
    <path id="Subtraction_1" data-name="Subtraction 1" d="M9.126,19.253h0a8.835,8.835,0,0,1-6.453-2.82A9.835,9.835,0,0,1,0,9.626,9.835,9.835,0,0,1,2.673,2.82,8.835,8.835,0,0,1,9.126,0V19.252Z" transform="translate(382.43 45.489) rotate(30)" fill="url(#linear-gradient)"/>
    <path id="Subtraction_2" data-name="Subtraction 2" d="M13.694,0h0A13.694,13.694,0,0,0,4.011,23.377a13.6,13.6,0,0,0,9.683,4.011V0Z" transform="translate(395.769 74.857) rotate(-150)" fill="#2e2e2e"/>
  </g>
</svg>

这是我想要使用的文件的svg代码，我注意到这一个比另一个大得多，我不确定如何扩展它-我已经按照与第一个完全相同的尺寸设计了它。

<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="-249 381.4 111.2 30.6" style="enable-background:new -249 381.4 111.2 30.6;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;}
    .st1{fill:#3F3F3F;}
    .st2{font-family:'TimesNewRomanPSMT';}
    .st3{font-size:9px;}
    .st4{fill:url(#SVGID_1_);}
    .st5{enable-background:new    ;}
    .st6{opacity:0.94;fill:#3F3F3F;enable-background:new    ;}
    .st7{fill:url(#SVGID_2_);}
</style>
<g id="logo1">
    <g id="Group_2" transform="translate(-372.804 -44.291)">
        <rect x="162.3" y="429.1" class="st0" width="70" height="14.8"/>
        <rect x="168.4" y="447.9" class="st0" width="62.3" height="17.2"/>
        <text transform="matrix(1 0 0 1 166.6004 452.7043)" class="st1 st2 st3">T E S T I N G</text>

            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1315.772" y1="396.6173" x2="1315.772" y2="397.534" gradientTransform="matrix(1 0 0 -1 -1118.412 841.891)">
            <stop  offset="0" style="stop-color:#008080"/>
            <stop  offset="1" style="stop-color:#FFFFFF"/>
        </linearGradient>
        <path class="st4" d="M218,444.3h-41.3c-0.3,0-0.5,0.2-0.5,0.5l0,0c0,0.3,0.2,0.5,0.5,0.5H218c0.3,0,0.5-0.2,0.5-0.5l0,0
            C218.4,444.5,218.2,444.3,218,444.3z"/>

            <image style="display:none;overflow:visible;enable-background:new    ;" width="579" height="560" xlink:href="../../../../../OPENUP2.png"  transform="matrix(5.116580e-002 0 0 5.116580e-002 127.942 426.9386)">
        </image>
        <rect x="161.2" y="428.9" class="st0" width="73.3" height="19"/>
        <g class="st5">
            <path class="st1" d="M172.3,428.9l3.8,14.1h-3.8l-0.8-2.8h-4.1l-0.8,2.8h-3.8l3.2-12.1l-1.3-2H172.3z M168.2,437.4h2.6l-1.3-4.9
                L168.2,437.4z"/>
            <path class="st1" d="M175.7,428.9h13.1v2.8h-3.8V443h-3.8v-11.3h-3.8L175.7,428.9z"/>
            <path class="st1" d="M194.7,428.9v11.3h3.8v-1.4h3.8v4.2h-11.3v-11.3l-1.9-2.8H194.7z"/>
            <path class="st1" d="M213.1,428.9l3.8,14.1h-3.8l-0.8-2.8h-4.1l-0.8,2.8h-3.8l3.2-12.1l-1.3-2H213.1z M209,437.4h2.6l-1.3-4.9
                L209,437.4z"/>
            <path class="st1" d="M229.6,433.1h-3.8v-1.4h-3.8v2.8h5.6l1.9,1.4v5.6l-1.9,1.4h-9.4v-4.2h3.8v1.4h3.8v-2.8h-5.6l-1.9-1.4v-4.2
                l-1.9-2.8h13.1V433.1z"/>
        </g>
    </g>
</g>
<g id="logo2">
    <path class="st6" d="M-221.2,404.1c1-1.6,1.5-3.5,1.5-5.5c0-5.8-4.7-10.6-10.5-10.6s-10.5,4.7-10.5,10.6c0,2.1,0.6,4,1.6,5.6
        c-1.5-1.9-2.3-4.3-2.3-6.8c0-6.2,5-11.2,11.2-11.2s11.2,5,11.2,11.2C-219,399.9-219.8,402.2-221.2,404.1z"/>

        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-230.19" y1="390.4008" x2="-230.19" y2="401.4307" gradientTransform="matrix(1 0 0 1 0 2.8)">
        <stop  offset="0" style="stop-color:#000000"/>
        <stop  offset="0.1813" style="stop-color:#002222"/>
        <stop  offset="0.432" style="stop-color:#004A4A"/>
        <stop  offset="0.6608" style="stop-color:#006868"/>
        <stop  offset="0.8577" style="stop-color:#007A7A"/>
        <stop  offset="1" style="stop-color:#008080"/>
    </linearGradient>
    <path class="st7" d="M-235.7,402.6c0,0,2.3,1.5,5.5,1.6s5.5-1.6,5.5-1.6l-5.5-9.5L-235.7,402.6z"/>
</g>
</svg>

下面是特定导航栏的js/css/html代码。

//===== Sticky

    $(window).on('scroll', function (event) {
        var scroll = $(window).scrollTop();
        if (scroll < 20) {
            $(".navbar-area").removeClass("sticky");
            $(".navbar .navbar-brand img").attr("src", "assets/images/logo.svg");
        } else {
            $(".navbar-area").addClass("sticky");
            $(".navbar .navbar-brand img").attr("src", "assets/images/logo-2.svg");
        }
    });
/*===== NAVBAR =====*/
.navbar-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.sticky {
  position: fixed;
  z-index: 99;
  background-color: rgb(83, 83, 83);
  -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }
  .sticky .navbar {
    padding: 10px 0; }

.navbar {
  padding: 25px 0;
  border-radius: 5px;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.navbar-brand {
  padding: 0; }

.navbar-toggler {
  padding: 0; }
  .navbar-toggler .toggler-icon {
    width: 30px;
    height: 2px;
    background-color: #fff;
    display: block;
    margin: 5px 0;
    position: relative;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
  .navbar-toggler.active .toggler-icon:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 7px; }
  .navbar-toggler.active .toggler-icon:nth-of-type(2) {
    opacity: 0; }
  .navbar-toggler.active .toggler-icon:nth-of-type(3) {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    top: -7px; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #008080;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 5px 12px; } }

@media (max-width: 767px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 5px 12px; } }

.navbar-nav .nav-item {
  margin-right: 45px;
  position: relative; }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar-nav .nav-item {
      margin-right: 30px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-nav .nav-item {
      margin: 0; } }
  @media (max-width: 767px) {
    .navbar-nav .nav-item {
      margin: 0; } }
  .navbar-nav .nav-item a {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    padding: 10px 0;
    position: relative;
    font-family: "Poppins", sans-serif; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-nav .nav-item a {
        display: block;
        padding: 4px 0;
        color: #2E2E2E; } }
    @media (max-width: 767px) {
      .navbar-nav .nav-item a {
        display: block;
        padding: 4px 0;
        color: #2E2E2E; } }
  .navbar-nav .nav-item:hover .sub-menu {
    top: 100%;
    opacity: 1;
    visibility: visible; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-nav .nav-item:hover .sub-menu {
        top: 0; } }
    @media (max-width: 767px) {
      .navbar-nav .nav-item:hover .sub-menu {
        top: 0; } }
  .navbar-nav .nav-item .sub-menu {
    width: 200px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 110%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-nav .nav-item .sub-menu {
        position: relative;
        width: 100%;
        top: 0;
        display: none;
        opacity: 1;
        visibility: visible; } }
    @media (max-width: 767px) {
      .navbar-nav .nav-item .sub-menu {
        position: relative;
        width: 100%;
        top: 0;
        display: none;
        opacity: 1;
        visibility: visible; } }
    .navbar-nav .nav-item .sub-menu li {
      display: block; }
      .navbar-nav .nav-item .sub-menu li a {
        display: block;
        padding: 8px 20px;
        color: #2E2E2E; }
        .navbar-nav .nav-item .sub-menu li a.active, .navbar-nav .nav-item .sub-menu li a:hover {
          padding-left: 25px;
          color: #008080; }

.navbar-nav .sub-nav-toggler {
  display: none; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-nav .sub-nav-toggler {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      background: none;
      color: #2E2E2E;
      font-size: 18px;
      border: 0;
      width: 30px;
      height: 30px; } }
  @media (max-width: 767px) {
    .navbar-nav .sub-nav-toggler {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      background: none;
      color: #2E2E2E;
      font-size: 18px;
      border: 0;
      width: 30px;
      height: 30px; } }
  .navbar-nav .sub-nav-toggler span {
    width: 8px;
    height: 8px;
    border-left: 1px solid #2E2E2E;
    border-bottom: 1px solid #2E2E2E;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    top: -5px; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-btn {
    position: absolute;
    top: 50%;
    right: 50px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); } }

@media (max-width: 767px) {
  .navbar-btn {
    position: absolute;
    top: 50%;
    right: 50px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); } }

.navbar-btn .main-btn {
  height: 45px;
  line-height: 45px;
  background: -webkit-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%);
  background: -o-linear-gradient(left, #fe8464 0%, #fe6e9a 50%, #fe8464 100%);
  background: linear-gradient(to right, #fe8464 0%, #fe6e9a 50%, #fe8464 100%);
  background-size: 200%; }
  .navbar-btn .main-btn:hover {
    color: #fff;
    background-position: right center; }

.sticky .navbar-toggler .toggler-icon {
  background-color: #2E2E2E; }

.sticky .navbar-nav .nav-item a {
  color: #2E2E2E; }

.sticky .navbar-nav .nav-item.active > a, .sticky .navbar-nav .nav-item:hover > a {
  color: #008080; }
<!--====== HEADER PART START ======-->

    <header class="header-area">
        <div class="navbar-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <nav class="navbar navbar-expand-lg">
                            <a class="navbar-brand" href="index.html">
                                <img src="assets/images/logo.svg" alt="Logo">
                            </a>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="toggler-icon"></span>
                                <span class="toggler-icon"></span>
                                <span class="toggler-icon"></span>
                            </button>

                            <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
                                <ul id="nav" class="navbar-nav ml-auto">
                                    <li class="nav-item active">
                                        <a class="page-scroll" href="#home">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="page-scroll" href="#features">Features</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="page-scroll" href="#about">About</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="page-scroll" href="#facts">Why</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="page-scroll" href="#team">Team</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="page-scroll" href="#blog">Blog</a>
                                    </li>
                                </ul>
                            </div> <!-- navbar collapse -->

                            <div class="navbar-btn d-none d-sm-inline-block">
                                <a class="main-btn" data-scroll-nav="0" href="#pricing">Free Trial</a>
                            </div>
                        </nav> <!-- navbar -->
                    </div>
                </div> <!-- row -->
            </div> <!-- container -->
        </div> <!-- navbar area -->

        <div id="home" class="header-hero bg_cover" style="background-image: url(assets/images/banner-bg1.png)">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="header-hero-content text-center">
                            <h3 class="header-sub-title wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.2s">Landing Header</h3>
                            <h2 class="header-title wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.5s">Second Header</h2>
                            <p class="text wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.8s">sample text - insert details</p>
                            <a href="#" class="main-btn wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="1.1s">Get Started</a>
                        </div> <!-- header hero content -->
                    </div>
                </div> <!-- row -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="header-hero-image text-center wow fadeIn" data-wow-duration="1.3s" data-wow-delay="1.4s">
                            <img src="assets/images/header-hero1.png" alt="hero">
                        </div> <!-- header hero image -->
                    </div>
                </div> <!-- row -->
            </div> <!-- container -->
            <div id="particles-1" class="particles"></div>
        </div> <!-- header hero -->
    </header>

    <!--====== HEADER PART ENDS ======-->
jqueryJavaScriptHtmlcsssvg

1条答案

按热度按时间
lo8azlld

lo8azlld1#

由于@enxaneta为我发现了这一点，我的徽标上的宽度和高度标记为0。
我会把这个留给以后的人们去发现，谢谢！

赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com