在Firefox中无法正确呈现SVG

我正在为一个项目开发一个SVG徽标，测试时，该徽标在Google Chrome中呈现良好，但在Firefox中呈现不正确

Google Chrome中的徽标应该是：

Firefox中的徽标是：

我用于SVG的代码是：

<svg version="1.1" id="svg-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="svg-logo-rectangle" x="3.744" y="47.804" />
    <text id="svg-logo-text-crocker" transform="matrix(1 0 0 1 130 98.3037)">Crocker</text>
    <text id="svg-logo-text-estates" transform="matrix(1 0 0 1 130 163.3037)" font-size="64.9214">Estates</text>
    <text id="svg-logo-text-c" transform="matrix(1 0 0 1 0 118.3037)">C</text>
    <text id="svg-logo-text-e" transform="matrix(1 0 0 1 55 168.3037)">E</text>
    <text id="svg-logo-text-house-finder" transform="matrix(1 0 0 1 131 197.3037)">House Finder</text>
    <g id="svg-logo-house-1">
        <rect x="5.181" y="15.696" width="26.502" height="26.502"/>
        <polygon points="5.181,15.696 18.393,2.696 31.604,15.696    "/>
        <rect class="window" x="7.559" y="18.737" />
        <rect class="window" x="21.684" y="18.737" />
        <rect class="window" x="21.684" y="31.862" />
        <rect class="door" x="8.871" y="36.011" width="4.875" height="6.703"/>
    </g>
    <g id="svg-logo-house-2">
        <rect x="46.493" y="15.696" width="26.502" height="26.502"/>
        <polygon points="46.493,15.696 59.705,2.696 72.916,15.696   "/>
        <rect class="window" x="48.871" y="18.737" />
        <rect class="window" x="62.996" y="18.737" />
        <rect class="window" x="62.996" y="31.862" />
        <rect class="door" x="50.184" y="36.011" width="4.875" height="6.703"/>
    </g>
    <g id="svg-logo-house-3">
        <rect x="87.806" y="15.696" width="26.502" height="26.502"/>
        <polygon points="87.806,15.696 101.018,2.696 114.229,15.696     "/>
        <rect class="window" class="window" x="90.184" y="18.737" width="7.5" height="7.5"/>
        <rect class="window" class="window" x="104.309" y="18.737" width="7.5" height="7.5"/>
        <rect class="window" class="window" x="104.309" y="31.862" width="7.5" height="7.5"/>
        <rect class="door" x="91.496" y="36.011" />
    </g>
</svg>

克罗克
地产
C
E
寻屋者

---

你知道为什么这不起作用吗？

目前只有Chrome支持通过CSS设置rect高度和宽度，因为这是SVG 2的一个新功能。在所有情况下，都需要将宽度和高度作为属性

---

两次使用相同的属性名是无效的，因此您也应该删除冗余的类属性。

您在多个位置缺少维度

Svg标志矩形 1号楼，全部3扇窗户 2号楼，全部3扇窗户

---

3号房屋的门缺少尺寸标注？3号房屋的矩形定义了两次类。也许这是一个原因？房子的门也缺少尺寸。尺寸是在CSS中定义的。你说得对，比我说得更快更好。