Question

我无法在mdbootstrap导航栏中将文本与SVG徽标对齐。我已经尝试了这个线程position svg中的所有解决方案，但没有一个正在运行。我刚学习SVG，而且我不是使用CSS的专家。

使用当前的CSS设置我会在导航栏的中间显示徽标，但我需要它在文本之前。

html navbar

<!--Main Navigation-->
<header>

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark light-blue scrolling-navbar">
        <a class="navbar-brand" href="#">
            <svg id="eerc-logo-strokes" viewBox="0 0 322 260" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="322px" height="260px">
                <g>
                    <path d="M 191.1762 129.8679 C 190.8577 120.7468 198.0377 113.0452 207.1588 112.7267 C 216.2799 112.4082 223.9796 119.5901 224.2981 128.7113 C 224.6166 137.8323 217.4366 145.532 208.3155 145.8505 C 199.1944 146.169 191.4948 138.989 191.1762 129.8679 Z" stroke="#fff" stroke-width="2" fill="none" />
                    <path d="M 22.7103 103.2846 L 42.6281 77.7907 L 74.6689 82.2927 L 83.0325 102.9983 L 180.9312 116.757 C 186.3008 105.3062 198.7038 98.1359 211.8558 99.9855 C 214.3942 100.3427 216.8107 101.0149 219.0764 101.9583 L 244.0526 69.9884 L 235.3467 48.4384 L 255.2645 22.9445 L 287.3033 27.4466 L 299.4246 57.4445 L 279.505 82.9405 L 256.49 79.7049 L 231.4968 111.6949 C 235.9615 117.7191 238.1623 125.4255 237.0412 133.4082 C 235.92 141.3889 231.6785 148.1902 225.7281 152.752 L 236.2058 178.684 L 259.2207 181.9195 L 271.34 211.9175 L 251.4222 237.4114 L 219.3832 232.9094 L 207.264 202.9114 L 221.5711 184.595 L 211.1041 158.6899 C 208.6681 158.9705 206.157 158.9507 203.6187 158.5936 C 190.4686 156.7458 180.5208 146.434 178.5148 133.9485 L 80.6161 120.1897 L 66.8685 137.7866 L 34.8295 133.2826 L 22.7103 103.2846 L 22.7103 103.2846 Z" stroke="#fff" stroke-width="2" fill="none" />
                </g>
            </svg>

            <svg id="eerc-logo-fill-wnw" viewBox="0 0 322 260" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="322px" height="260px">
                <path d="M 22.7103 103.2846 L 22.725 103.325 L 54.7493 107.7886 L 74.705 82.385 L 74.6689 82.2927 L 42.6281 77.7907 L 22.7103 103.2846 Z" fill="#fff" />
            </svg>

            <svg id="eerc-logo-fill-ene" viewBox="0 0 322 260" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="322px" height="260px">
                <path d="M 279.72 82.67 L 299.4246 57.4445 L 287.4 27.685 L 267.3857 52.9424 L 279.72 82.67 Z" fill="#fff" />
            </svg>

            <svg id="eerc-logo-fill-sse" viewBox="0 0 322 260" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="322px" height="260px">
                <path d="M 207.264 202.9114 L 219.3832 232.9094 L 251.1 237.365 L 239.301 207.4135 L 207.264 202.9114 Z" fill="#fff" />
            </svg>
            <strong>
                DATUS</strong></a>
        <button class="navbar-toggler" (click)="mobile.toggle()" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" [mdbCollapse]="isCollapsed" #mobile="bs-collapse" id="navbarSupportedContent">
        </div>
        <!-- Collapsible content -->
    </nav>

</header>
<!--Main Navigation-->

CSS

body {
    background: #fff;
  }

  #log {
    position: absolute;
    top: 40px;
    left: 0;
    right: 40px;
    //bottom: 0;
    margin: auto;
    color: #393;
    width: 200px;
    height: 40px;
    overflow: hidden;
  }
  #log p {
    margin: 0;
  }

  svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 50px;
  }
  svg#eerc-logo-fill-wnw, // West-northwest rectangle
  svg#eerc-logo-fill-ene, // East-northeast rectangle
  svg#eerc-logo-fill-sse { // South-southeast rectangle
    display: none;
  }

对于Angular2 +应用程序，所以我有一个打字稿文件，我使用了一些JQuery。这是代码：

import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
declare var $:any;
declare var drawsvg: any;

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  var $svgFillWnw = $('svg#eerc-logo-fill-wnw'); // West-northwest rectangle
  var $svgFillEne = $('svg#eerc-logo-fill-ene'); // East-northeast rectangle
  var $svgFillSse = $('svg#eerc-logo-fill-sse'); // South-southeast rectangle

  function animate() {
    $svgFillWnw.hide();
    $svgFillEne.hide();
    $svgFillSse.hide();
    $svgFillWnw.fadeIn(400, function() {
      $svgFillEne.fadeIn(300, function() {
        $svgFillSse.fadeIn(200);
      });
    });
  }

  animate();

  }

}

那么，我如何将SVG与徽标文本内联？一如既往地感谢您的帮助！

Answer 1

使svg的高度和宽度为100％，因为它现在是静态的，260px / 322px

SVG内嵌徽标文本

1 个答案: