SVG 在 Firefox 中无法正确渲染答案

【问题标题】：SVG Not Rendering Correctly in FirefoxSVG 在 Firefox 中无法正确渲染
【发布时间】：2017-05-26 04:40:02
【问题描述】：

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

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

【问题讨论】：

<rect id="svg-logo-rectangle" x="3.744" y="47.804" /> 缺少尺寸？
House 3 矩形的类定义了两次。也许这是一个原因？
House 3s 门也缺少尺寸
尺寸在 CSS 中定义

标签： firefox svg

【解决方案1】：

您在多个位置缺少尺寸。

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

【讨论】：

【解决方案2】：

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

两次使用相同的属性名是无效的，所以你也应该删除多余的类属性。

【讨论】：

你说得对，比我写得更好更快。