Firefox中内联SVG部分内容需选中/重滚动才渲染的问题求助

问题概述 #

网页中使用PlantUML导出的内联SVG元素，在Chrome、Edge及iOS Safari显示正常，但Firefox中部分内容常无法渲染，需选中或滚出页面再滚回才显示；改用<img>标签引入SVG则Firefox正常，但Safari显示异常。排查后发现问题与SVG的阴影滤镜相关，移除阴影（skinparam Shadowing false）可解决Firefox问题，但希望保留阴影效果。

针对性解决方案 #

1. 调整SVG滤镜的边界参数 #

Firefox对SVG滤镜的x/y/width/height参数计算存在兼容问题，原滤镜的超大范围（x="-1" y="-1" width="300%" height="300%"）可能导致渲染异常，改为更合理的边界值即可：

<filter height="140%" id="fd8xeq7sn9ue2" width="140%" x="-20%" y="-20%">
    <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
    <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
    <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
    <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
</filter>

2. 添加无意义变换触发强制重绘 #

Firefox的渲染优化可能跳过SVG元素绘制，为SVG标签添加transform="translate(0,0)"可强制浏览器重绘：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="58px" preserveAspectRatio="none" style="width:105px;height:58px;background:#00000000;" version="1.1" viewBox="0 0 105 58" width="105px" zoomAndPan="magnify" transform="translate(0,0)">

3. 用CSS阴影替代SVG内置滤镜 #

若上述方法无效，可移除SVG中的滤镜定义，改用CSS drop-shadow实现阴影，跨浏览器兼容性更好：

• 修改SVG的rect元素，移除滤镜属性：

<rect fill="#FEFECE" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="7" y="7"/>

• 添加CSS样式：

figure.figure svg #elem_ListDog rect {
    filter: drop-shadow(4px 4px 2px rgba(0,0,0,0.4));
}

4. JS延迟触发SVG重绘 #

若问题出在页面加载时机，可通过JS在页面加载完成后强制SVG重绘：

window.addEventListener('load', function() {
    document.querySelectorAll('figure.figure svg').forEach(svg => {
        svg.style.display = 'none';
        svg.offsetHeight; // 触发回流
        svg.style.display = 'block';
    });
});

内容的提问来源于stack exchange，提问作者Zac Crites