在Bootstrap的navbar-brand中使用SVG标志

10

解释

我试图将我的SVG标志放置在Bootstrap的导航栏中,但是由于某些原因,它不起作用。如下面的代码所示,我尝试使用<object>(如在CSS技巧中建议的),内联svg和<img>,但都没有起作用。

代码

您可以从Bootstrap网站此处下载保存SVG标志以供使用<object>

#navigation {
    background-color: rgba(72, 8, 111, 0.4);
    border: 0 none;
    margin: 0;
}

.navbar-brand {
    padding: 0;
}

.logo {
    margin: 0;
}
<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Page Title -->
        <title>svg on bootstrap's navbar</title>

 <!-- CSS
 ================================================== -->
 <!-- Fontawesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Twitter Bootstrap css -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 <!-- Main Stylesheet -->
        <link rel="stylesheet" href="main.css">

    </head>

    <body id="body">

        <header id="navigation" class="navbar-fixed-top navbar">
            <div class="container">
                <div class="navbar-header">

                    <!-- responsive nav button -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars fa-2x"></i>
                    </button>
             <!-- end responsive nav button -->


      <!-- logo png -->
                    <a class="navbar-brand" href="#First">
          <img src="http://i.imgur.com/qHjO7J9.png" alt="logo">
      </a>
      <!-- end logo png -->

                    <!-- logo object
                     <a class="navbar-brand" href="#First">
                       <object type="image/svg+xml" data="logo.svg" class="logo">
                           Logo
                       </object>
                    </a>
                     end logo object -->

                    <!-- logo inline svg
                    <a class="navbar-brand" href="#First">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new    "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
      </a>
       end logo inline svg -->

                    <!-- logo img svg
                    <a class="navbar-brand" href="#First">
                        <img src="logo.svg" alt="logo">
                    </a>
                     end logo img svg -->

                </div>

         <!-- main nav -->
                <nav class="collapse navbar-collapse navbar-right" role="navigation">
                    <ul id="nav" class="nav navbar-nav">
                        <li class="current"><a href="#First">First</a></li>
                        <li><a href="#Second">Second</a></li>
                        <li><a href="#Third">Third</a></li>
                        <li><a href="#Forth">Forth</a></li>
                    </ul>
                </nav>
  <!-- end main nav -->

            </div>
        </header>


        <section>
            <div class="container">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new    "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
            </div>
        </section>


 <!-- jQuery Plugins
 ================================================== -->
 <!-- Main jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Twitter Bootstrap -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

</html>

提前致谢,
Luiz。

2个回答

11

你主要的问题在于没有为SVG指定大小。如果SVG没有widthheight属性,则它们默认为“100%” - 即父容器的100%宽度。

下面我只是在CSS中设置了宽度,现在它的大小更合理了。您需要添加更多样式才能使其位于标头栏中所需的位置。

#navigation {
    background-color: rgba(72, 8, 111, 0.4);
    border: 0 none;
    margin: 0;
}

.navbar-brand {
    padding: 0;
}

.logo {
    margin: 0;
}

svg {
  width: 50px;
  height: 50px;
}
<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Page Title -->
        <title>svg on bootstrap's navbar</title>

 <!-- CSS
 ================================================== -->
 <!-- Fontawesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Twitter Bootstrap css -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 <!-- Main Stylesheet -->
        <link rel="stylesheet" href="main.css">

    </head>

    <body id="body">

        <header id="navigation" class="navbar-fixed-top navbar">
            <div class="container">
                <div class="navbar-header">

                    <!-- responsive nav button -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars fa-2x"></i>
                    </button>
             <!-- end responsive nav button -->


      <!-- logo png -->
                    <a class="navbar-brand" href="#First">
          <img src="http://i.imgur.com/qHjO7J9.png" alt="logo">
      </a>

                </div>

         <!-- main nav -->
                <nav class="collapse navbar-collapse navbar-right" role="navigation">
                    <ul id="nav" class="nav navbar-nav">
                        <li class="current"><a href="#First">First</a></li>
                        <li><a href="#Second">Second</a></li>
                        <li><a href="#Third">Third</a></li>
                        <li><a href="#Forth">Forth</a></li>
                    </ul>
                </nav>
  <!-- end main nav -->

            </div>
        </header>


        <section>
            <div class="container">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new    "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
            </div>
        </section>


 <!-- jQuery Plugins
 ================================================== -->
 <!-- Main jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Twitter Bootstrap -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

</html>


1
谢谢!它非常有效,但由于我只能对这个问题设置一个答案,所以我设置了另一个答案,因为它先被回答了。顺便说一下,你的答案和第一个答案一样好。 - Luiz

6

如您所见,以下标签可以正常工作,就HTML的放置而言。我必须添加一些CSS进行大小调整。我不得不使用我找到的随机SVG来演示它。在您的例子中,“logo.svg”是从哪里提供的?

#navigation {
    background-color: rgba(72, 8, 111, 0.4);
    border: 0 none;
    margin: 0;
}

.navbar-brand {
    padding: 0;
}

.logo {
    margin: 0;
}
<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Page Title -->
        <title>svg on bootstrap's navbar</title>

 <!-- CSS
 ================================================== -->
 <!-- Fontawesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Twitter Bootstrap css -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 <!-- Main Stylesheet -->
        <link rel="stylesheet" href="main.css">

    </head>

    <body id="body">

        <header id="navigation" class="navbar-fixed-top navbar">
            <div class="container">
                <div class="navbar-header">

                    <!-- responsive nav button -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars fa-2x"></i>
                    </button>
             <!-- end responsive nav button -->


      <!-- logo png -->
                    <a class="navbar-brand" href="#First">
          <img src="http://i.imgur.com/qHjO7J9.png" alt="logo">
      </a>
      <!-- end logo png -->

                    <!-- logo object
                     <a class="navbar-brand" href="#First">
                       <object type="image/svg+xml" data="logo.svg" class="logo">
                           Logo
                       </object>
                    </a>
                     end logo object -->

                    <!-- logo inline svg
                    <a class="navbar-brand" href="#First">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new    "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
      </a>
       end logo inline svg -->

                    <!-- logo img svg-->
                    <a class="navbar-brand" href="#First">
                        <img style="max-height: 30px;" src="http://s.cdpn.io/3/kiwi.svg">
                        <!--img src="" alt="logo"-->
                    </a>
                     <!--end logo img svg -->

                </div>

         <!-- main nav -->
                <nav class="collapse navbar-collapse navbar-right" role="navigation">
                    <ul id="nav" class="nav navbar-nav">
                        <li class="current"><a href="#First">First</a></li>
                        <li><a href="#Second">Second</a></li>
                        <li><a href="#Third">Third</a></li>
                        <li><a href="#Forth">Forth</a></li>
                    </ul>
                </nav>
  <!-- end main nav -->

            </div>
        </header>

        <!-- REMOVE THIS
        <section>
            <div class="container">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new    "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
            </div>
        </section>
        -->

 <!-- jQuery Plugins
 ================================================== -->
 <!-- Main jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Twitter Bootstrap -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

</html>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接