SVG 无法在 Firefox 上加载

Posted 2023-03-06

【中文标题】SVG 无法在 Firefox 上加载

【英文标题】：SVG does not load on 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" 
    
    />
</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">
    .st0fill:#8496A1;
    .st1fill:#476273;
    .st2fill:#061A28;
    .st3fill:#082335;
    .st4fill:#FFA4B4;
    .st5fill:#FF778F;
    .st6fill:#FF4A6A;
    .st7fill:#C53953;
    .st8fill:#841F37;
    .st9fill:#922A3E;
    .st10fill:#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"  />
</g>
<g>
    <rect x="126.2" y="280.9" class="st2"  />
    <path class="st2" d="1.7V384.3z"/>
</g>
<g>
    <rect x="74.5" y="177.5" class="st3"  />
    <rect x="126.2" y="229.2" class="st3"  />
    <rect x="74.5" y="280.9" class="st3"  />
    <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"  />
    <rect x="333" y="74.1" class="st5"  />
</g>
<g>
    <rect x="281.3" y="177.5" class="st6"  />
    <rect x="333" y="229.2" class="st6"  />
</g>
<g>
    <rect x="229.6" y="177.5" class="st7"  />
    <rect x="333" y="177.5" class="st7"  />
    <rect x="281.3" y="229.2" class="st7"  />
    <rect x="333" y="280.9" class="st7"  />
</g>
<g>
    <path class="st8" d="3.6-3.6v-48.1H333V384.3z"/>
</g>
<g>
    <rect x="177.9" y="177.5" class="st9"  />
    <rect x="229.6" y="229.2" class="st9"  />
    <rect x="281.3" y="280.9" class="st9"  />
    <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 是否有任何限制？

【参考方案1】：

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

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

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

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

【讨论】：

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