SVG 无法在 Firefox 上加载答案

【问题标题】：SVG does not load on firefoxSVG 无法在 Firefox 上加载
【发布时间】：2021-03-07 16:34:34
【问题描述】：

svg 图像在所有其他浏览器上加载它没有在 Firefox 上加载

我在 DOM 上找不到代码。
我正在从 Tomcat 9.0.34 提供页面

<kendo-grid grid-options="gridOptions">

<img
    src="common/svg/Plain-HedvigLogo.svg" 
    height="150"
    width="100"/>
</kendo-grid>

Plain-Logo.svg 这是应该出现在浏览器上的徽标 svg 文件。

   

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 459.2 602.7" style="enable-background:new 0 0 459.2 602.7;" class="add-new-placeholder" xml:space="preserve">
<style type="text/css">
    .st0{fill:#8496A1;}
    .st1{fill:#476273;}
    .st2{fill:#061A28;}
    .st3{fill:#082335;}
    .st4{fill:#FFA4B4;}
    .st5{fill:#FF778F;}
    .st6{fill:#FF4A6A;}
    .st7{fill:#C53953;}
    .st8{fill:#841F37;}
    .st9{fill:#922A3E;}
    .st10{fill:#0B2E44;}
</style>
<g>
    <path class="st0" d="M177.9,125.8h-51.7V74.1h48.1c2,0,3.6,1.6,3.6,3.6V125.8z"/>
</g>
<g>
    <path class="st1" d="125.8z"/>
    <rect x="126.2" y="125.8" class="st1" width="51.7" height="51.7"/>
</g>
<g>
    <rect x="126.2" y="280.9" class="st2" width="51.7" height="51.7"/>
    <path class="st2" d="1.7V384.3z"/>
</g>
<g>
    <rect x="74.5" y="177.5" class="st3" width="51.7" height="51.7"/>
    <rect x="126.2" y="229.2" class="st3" width="51.7" height="51.7"/>
    <rect x="74.5" y="280.9" class="st3" width="51.7" height="51.7"/>
    <path class="st3" d=",176.3,384.3,174.3,384.3z"/>
</g>
<g>
    <path class="st4" d="6,3.6,3.6V74.1z"/>
</g>
<g>
    <path class="st5" d="3.6-3.6H333V74.1z"/>
    <rect x="281.3" y="125.8" class="st5" width="51.7" height="51.7"/>
    <rect x="333" y="74.1" class="st5" width="51.7" height="51.7"/>
</g>
<g>
    <rect x="281.3" y="177.5" class="st6" width="51.7" height="51.7"/>
    <rect x="333" y="229.2" class="st6" width="51.7" height="51.7"/>
</g>
<g>
    <rect x="229.6" y="177.5" class="st7" width="51.7" height="51.7"/>
    <rect x="333" y="177.5" class="st7" width="51.7" height="51.7"/>
    <rect x="281.3" y="229.2" class="st7" width="51.7" height="51.7"/>
    <rect x="333" y="280.9" class="st7" width="51.7" height="51.7"/>
</g>
<g>
    <path class="st8" d="3.6-3.6v-48.1H333V384.3z"/>
</g>
<g>
    <rect x="177.9" y="177.5" class="st9" width="51.7" height="51.7"/>
    <rect x="229.6" y="229.2" class="st9" width="51.7" height="51.7"/>
    <rect x="281.3" y="280.9" class="st9" width="51.7" height="51.7"/>
    <path class="st9" d="M381.1,384.3H333v-51.7h51.784.3,381.1,384.3z"/>
</g>
</svg>

svg 图像在所有其他浏览器上加载它没有在 Firefox 上加载

我什至在 DOM 上都找不到代码。

【问题讨论】：

我正在从 Tomcat 9.0.34 提供页面
对我来说很好。
它以剑道网格为界，当网格为空时，svg 作为占位符。剑道网格代码非常庞大，所以我无法将其粘贴在这里。 Firefox 对图像/svg 是否有任何限制？

标签： css angularjs svg firefox

【解决方案1】：

如果您将 DOM 用作 IMG，则无法在 DOM 中找到 svg 代码

 <img 
    src="common/svg/Plain-Logo.svg" 
    style="width:150px; height:100px;" />

请检查您使用 Firefox 直接打开的 SVG 文件并检查以下内容，

检查 SVG 文件查看框
图片位置浮动问题
直接在 Firefox 中打开 SVG 文件

【讨论】：

我已经检查了您的 SVG 在 Firefox 上的工作正常。