SVG background rect ignored by Chrome, Firefox?-CodePudding

In order to add a red background to the following SVG, I added a red rect:

<?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)">
   <rect x="-72" y="-72" width="100%" height="100%" fill="red" />
</ns0:svg>

(where x and y mark the origin of the view.) This displays correctly in

but Chrome and Firefox seem to ignore the <rect> and have a transparent background.

Any idea what's going wrong here?

CodePudding user response：

You're using custom namespaces so the svg namespace is ns0 for you. That's what the xmlns:ns0="http://www.w3.org/2000/svg" attribute does.

Therefore your rect element needs to be ns0:rect rather than just rect.

Alternatively you could say that your default namespace is svg by adding

xmlns="http://www.w3.org/2000/svg"

to the root element, then rect will just work as is.