SVG背景rect元素在Chrome、Firefox中不显示问题求助

问题出在SVG命名空间的处理上：你的SVG仅将ns0设为SVG命名空间的前缀，但未设置默认命名空间，而<rect>元素没有添加ns0:前缀，导致浏览器将其识别为非SVG命名空间的元素，因此忽略了这个矩形。

eog和Inkscape对非标准命名空间的元素兼容性更宽松，所以能正常显示。

两种修复方法： #

方法1：给rect元素添加命名空间前缀 #

将<rect>改为<ns0:rect>，确保它属于SVG命名空间：

<?xml version="1.0" encoding="UTF-8"?>
<ns0:svg xmlns:ns0="http://www.w3.org/2000/svg" xmlns:ns1="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:ns2="http://www.inkscape.org/namespaces/inkscape" xmlns:ns3="http://www.w3.org/1999/xlink" version="1.1" width="316.214" height="94.513" viewBox="-72 -72 237.16 70.885" ns1:docname="table-1.svg" ns2:version="1.1.2 (0a00cf5339, 2022-02-04)">
   <ns0:rect x="-72" y="-72" width="100%" height="100%" fill="red" />
</ns0:svg>

方法2：设置默认SVG命名空间 #

将SVG的默认命名空间设为http://www.w3.org/2000/svg，这样所有无前缀的元素都会属于SVG命名空间，无需给rect加前缀：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ns1="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:ns2="http://www.inkscape.org/namespaces/inkscape" xmlns:ns3="http://www.w3.org/1999/xlink" version="1.1" width="316.214" height="94.513" viewBox="-72 -72 237.16 70.885" ns1:docname="table-1.svg" ns2:version="1.1.2 (0a00cf5339, 2022-02-04)">
   <rect x="-72" y="-72" width="100%" height="100%" fill="red" />
</svg>

补充说明：你使用width="100%"和height="100%"的写法是有效的，它会基于SVG的viewBox尺寸计算，修复命名空间问题后，Chrome和Firefox就能正常显示红色背景。

内容的提问来源于stack exchange，提问作者Nico Schlömer