SVG在Firefox中无法正确呈现

Question

我正在为一个项目开发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>

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

Answer 1

目前只有Chrome支持通过CSS设置矩形高度和宽度，这是SVG 2的新功能。在所有情况下，您都需要包含宽度和高度作为属性。

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

Answer 2

您在多个位置缺少维度。

Svg徽标矩形 房子1，所有3个窗口 2号房子，全部3个窗户 房子3，门