SVG 图像在 chrome 和 ie 中显示良好，但在 Firefox 中失真答案

【问题标题】：SVG image shows up fine in chrome and ie but is distorted in FirefoxSVG 图像在 chrome 和 ie 中显示良好，但在 Firefox 中失真
【发布时间】：2018-07-27 21:57:00
【问题描述】：

由于某种原因，我的 SVG 图像在 FireFox 上查看时看起来失真。我不知道如何解决这个问题。我看到有人发布了类似问题的答案

<img srcset=".svg" src=".png"> 

但这并没有解决我的问题。任何帮助将不胜感激，因此如果将来其他人遇到此问题，我可以传播信息。谢谢！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <!-- Nav Bar -->
  <nav class="navbar navbar-nav fixed-top navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="index.html">
      <img class= "logo"  src="https://res.cloudinary.com/alexscloud1234/image/upload/v1518821671/logo_xmc12c.svg" alt="logo" height="50px" width="240px"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
        </ul>
      </div>
    </div>
    <!-- container -->
  </nav>

【问题讨论】：

请在问题中添加一个源自您的 svg 图像的 minimal reproducible example。目前，您已将除该图像之外的所有内容都放入问题中。

标签： html firefox svg cross-browser

【解决方案1】：

首先你的 SVG 有问题。 (1) 与此在线编辑器核对：http://editor.method.ac/ (2) 在 chrome 浏览器中打开你的文件，你会错过 char "rch" 的对齐方式

解决方案是再次生成 svg，并将此字符与：“研究解决方案”组合为一组。

【讨论】：