twitter-bootstrap Bootstrap 导航栏品牌中的 SVG 标志
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41606778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 00:31:20 来源:igfitidea点击:
SVG logo in Bootstrap's navbar-brand
提问by Luiz
Explanation
解释
I'm trying to place my SVGlogo in a Bootstrap's navbar, but, for some reason, it won't work. I've tried to use <object>(as recommended at CSS Tricks), inline svg and <img>, as you can see in the code below, but nothing worked.
我试图将我的SVG徽标放在 Bootstrap 的导航栏中，但由于某种原因，它不起作用。我尝试使用<object>（如CSS Tricks推荐的那样）、内联 svg 和<img>，正如您在下面的代码中看到的那样，但没有任何效果。
Code
代码
You can save the SVGlogo to use with <object>from Bootstrap's siteor download here.
您可以从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>Thanks in advance,
Luiz.
提前致谢，
路易斯。
采纳答案by Chris
As you can see below the tag works, as far as the placement in the html goes. I did have to add some css for sizing. I had to use just some random svg I found to demo it. Where is "logo.svg" being served from in your example?
正如您在标签下方所看到的，就 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>回答by Paul LeBeau
You main problem is that you haven't specified a size for the SVG. If the SVG doesn't have widthor heightattributes, they default to "100%" - that is 100% width (of the parent container).
您的主要问题是您尚未指定 SVG 的大小。如果 SVG 没有width或height属性，则它们默认为“100%”——即（父容器的）宽度的 100%。
Below I have just set the width in the CSS and it is now a more reasonable size. You will want to add more styling to get it to sit where you want in the header bar.
下面我刚刚在 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>