Chrome上的SVG位置已关闭。如何将其与Firefox上的显示方式对齐？

Question

我不知道为什么会这样。理想情况下，我希望svg显示在所有浏览器的文本上，但Chrome并没有实现这一点。这就是它在Firefox上的样子：

这就是它在Chrome上的样子： 正如你所知，svg在文本上。我不知道它是保证金还是svg，但我想知道如何解决这个问题。

这是我的CSS：

svg{
        display:block;
}
#rect{
    margin-top:-150px; /*helps svg display over text on Firefox. Nothing happens on Chrome*/
    margin-left:200px;
    height:500px;
}

这是SVG代码：

 <div class="circle-border">
          <div class="svg">

        <?xml version="1.0" encoding="utf-8"?>
        <!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
        <svg id="rect"  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 960 560"  xml:space="preserve">
        <style type="text/css">
        .st0{fill:none;stroke:white;stroke-miterlimit:10;}
        </style>
        <polygon class="st0" points="224.5,150.5 224.5,477.5 649.5,477.5 649.5,444.5 682.5,444.5 682.5,412.5 715.5,412.5 715.5,379.5 
        748.5,379.5 748.5,346.5 780.5,346.5 780.5,150.5 "/>
      </svg>

    </div><!--border-->

如果您需要其他信息，请随时与我们联系。