SVG在浏览器中有所不同

时间:2020-10-27 11:00:44

标签: reactjs svg browser adobe-illustrator

我遇到以下SVG问题:

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" xml:space="preserve" viewBox="0 0 106 79">
  <defs/>
    <style>
    .st0{fill:none;stroke:#18385f;stroke-width:1;stroke-linecap:round}.st0,.st1{stroke-miterlimit:10}.st1,.st2,.st4{fill:none;stroke:#18385f;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}.st4{stroke-miterlimit:10;stroke-dasharray:3}
  </style>
    <path d="M71.8 72.5H33.2c-.6 0-1.1-.5-1.1-1.1V45.7c0-.6.5-1.1 1.1-1.1h38.6c.6 0 1.1.5 1.1 1.1v25.7c0 .6-.5 1.1-1.1 1.1zM74.6 77.9H30.4c-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7h44.1c1.5 0 2.7 1.2 2.7 2.7.1 1.5-1.2 2.7-2.6 2.7z" class="st0"/>
    <path d="M37.4 47.8h30.1v21.5H37.4zM37.4 52.1h30.2" class="st0"/>
    <path d="M44 33.3c0-.1-.4-1.7.5-2.6.8-.8 2.2-.9 3.4 0 .2-1.5 1.3-2.6 2.4-2.6 1.1 0 1.8.9 1.9 1 .6-1.9 2.5-2.8 3.9-2.1 1.1.6 1.8 2.1 1.5 3.7 1.1-.2 2.2.5 2.4 1.6.2 1.2-.6 2.5-1.9 2.6H45c-.3-.2-.8-.7-1-1.6zM52.5 39.7v-4.8 4.8zM1.1 1.5h15.1v17.2H1.1zM10.8 1.5v5.4M16.2 6.9h-5.4M45 1.5h15.1v17.2H45zM54.7 1.5v5.4M60 6.9h-5.3M89.7 1.5h15.1v17.2H89.7zM99.4 1.5v5.4M104.8 6.9h-5.4M52.5 18.7v9.7" class="st1"/>
    <g>
    <path d="M60 9h2.5" class="st2"/>
        <path fill="none" stroke="#18385f" stroke-dasharray="4.393 4.393" stroke-linecap="round" stroke-linejoin="round" d="M66.9 9h15.4"/>
        <path d="M84.5 9H87" class="st2"/>
  </g>
    <path d="M97.3 18.7v14M61.1 32.7H97" class="st4"/>
    <path d="M8.7 18.7v14M43.9 32.7H9" class="st1"/>
</svg>

在我的预览中,渲染效果非常完美,即使是自由职业者在PNG上给我的导出效果也很完美,在我的react应用程序上看起来也很奇怪:

Strange SVG result

关于做什么的任何想法?我什至在这里通过它来修复代码:https://jakearchibald.github.io/svgomg/

0 个答案:

没有答案