Css Firefox上的SVG渲染问题

我们设计了一个9片缩放SVG，在我们的web应用程序中用作容器背景。它在最新版本的Chrome、Edge、Opera甚至IE 11上都能完美呈现。但是我们在Firefox上遇到了渲染问题（在版本40和42上测试）

以下是SVG代码：

但以下是它在Firefox上的呈现方式：

如您所见，完全没有显示右边缘和下边缘。首先，我认为应用的掩码有问题，但没有（编辑：似乎有）。然后我想也许Firefox不支持直接在

元素上应用转换，但这似乎也不是问题的原因

---

感谢@Duopixel和@RobertLongson，经过几个小时的努力，我终于想出了一个有效的解决方案。它似乎可以在所有现代浏览器上正确渲染。不过需要清理一下

<?xml version="1.0" encoding="utf-8" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style type="text/css">
        .mask {
        fill: white;
        stroke: black;
        stroke-width: 100px;
        }

        .fl {
        fill: #01A7CC;
        }
    </style>
    <defs>
        <mask id="mask-left-right">
            <rect class="mask" width="300px" height="100%" x="-100px" />
        </mask>
        <mask id="mask-right">
            <g>
                <svg x="-100%">
                    <rect class="mask" width="300px" height="100%" x="-100px" transform="scale(-1,1)" />
                </svg>
            </g>
        </mask>
        <mask id="mask-top-bottom">
            <rect class="mask" width="100%" height="300px" y="-100px" />
        </mask>
        <mask id="mask-bottom">
            <g>
                <svg y="-100%">
                    <rect class="mask" width="100%" height="300px" y="-100px" transform="scale(1,-1)" />
                </svg>
            </g>
        </mask>
        <mask id="mask-center">
            <rect class="mask" width="100%" height="100%" />
        </mask>
        <symbol id="bottomLeft" viewBox="0 0 200 200">
            <path class="fl" d="M0,150v45c0,2.8,2.3,5,5,5l45.3,0l0-2H17.7v-3l-10.8,0c-2.7,0-4.9-1.2-4.9-3.9V150L0,150z" />
        </symbol>
        <symbol id="bottom">
            <rect class="fl" x="50" y="0" width="100%" height="2" />
        </symbol>
        <symbol id="right">
            <rect class="fl" x="0" y="50" width="2" height="100%" />
        </symbol>
        <symbol id="topRight" viewBox="0 0 200 200">
            <polygon class="fl" points="200,50 200,45.4 154.6,0 150,0 150,2 152.5,2 198,47.5 198,50 " />
        </symbol>
        <symbol id="bottomRight" viewBox="0 0 200 200">
            <path class="fl" d="M198,150l0,25.3l0,11.5c0,2.7-2.2,4.9-4.9,4.9h-4.3v2.3c0,2.7-1.2,3-3.9,3l-34.9,0l0,3h14.6h4.4h17.5c2.8,0,4-1.3,4-4.1v-2.4h4.5c2.8,0,5-2.3,5-5l0-11.7l0-26.8L198,150z" />
        </symbol>
    </defs>
    <!-- top-left corner: -->
    <path class="fl" d="M50.3,0H5C2.3,0,0,2.3,0,5v45l2,0V8.9C2,6.2,4.2,5,6.9,5h43.3L50.3,0z" />

    <!-- bottom-left corner: -->
    <g transform="scale(1, -1)">
        <svg x="0" y="-100%">
            <use xlink:href="#bottomLeft" width="200" height="200" y="-200" transform="scale(1, -1)" />
        </svg>
    </g>

    <!-- top-right corner: -->
    <g transform="scale(-1, 1)">
        <svg x="-100%" y="0">
            <use xlink:href="#topRight" width="200" height="200" x="-200" transform="scale(-1, 1)" />
        </svg>
    </g>

    <!-- bottom-right corner: -->
    <g transform="scale(-1, -1)">
        <svg x="-100%" y="-100%">
            <use xlink:href="#bottomRight" width="200" height="200" y="-200" x="-200" transform="scale(-1, -1)" />
        </svg>
    </g>

    <!-- top edge: -->
    <rect class="fl" x="50.2" y="0" width="100%" height="2" mask="url(#mask-top-bottom)" />
    <!-- bottom edge: -->
    <rect class="fl" width="100%" height="2" y="-100%" mask="url(#mask-bottom)" transform="scale(1,-1)" />
    <!-- right edge: -->
    <rect class="fl" height="100%" width="2" x="-100%" mask="url(#mask-right)" transform="scale(-1,1)" />
    <!-- left edge: -->
    <rect class="fl" width="2" height="100%" mask="url(#mask-left-right)" />
</svg>

.面具{
填充物：白色；
笔画：黑色；
笔划宽度：100px；
}
.fl{
填料：#01A7CC；
}

多亏了@Duopixel和@RobertLongson，经过几个小时的努力，我终于想出了一个可行的解决方案。它似乎可以在所有现代浏览器上正确渲染。不过需要清理一下

<?xml version="1.0" encoding="utf-8" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style type="text/css">
        .mask {
        fill: white;
        stroke: black;
        stroke-width: 100px;
        }

        .fl {
        fill: #01A7CC;
        }
    </style>
    <defs>
        <mask id="mask-left-right">
            <rect class="mask" width="300px" height="100%" x="-100px" />
        </mask>
        <mask id="mask-right">
            <g>
                <svg x="-100%">
                    <rect class="mask" width="300px" height="100%" x="-100px" transform="scale(-1,1)" />
                </svg>
            </g>
        </mask>
        <mask id="mask-top-bottom">
            <rect class="mask" width="100%" height="300px" y="-100px" />
        </mask>
        <mask id="mask-bottom">
            <g>
                <svg y="-100%">
                    <rect class="mask" width="100%" height="300px" y="-100px" transform="scale(1,-1)" />
                </svg>
            </g>
        </mask>
        <mask id="mask-center">
            <rect class="mask" width="100%" height="100%" />
        </mask>
        <symbol id="bottomLeft" viewBox="0 0 200 200">
            <path class="fl" d="M0,150v45c0,2.8,2.3,5,5,5l45.3,0l0-2H17.7v-3l-10.8,0c-2.7,0-4.9-1.2-4.9-3.9V150L0,150z" />
        </symbol>
        <symbol id="bottom">
            <rect class="fl" x="50" y="0" width="100%" height="2" />
        </symbol>
        <symbol id="right">
            <rect class="fl" x="0" y="50" width="2" height="100%" />
        </symbol>
        <symbol id="topRight" viewBox="0 0 200 200">
            <polygon class="fl" points="200,50 200,45.4 154.6,0 150,0 150,2 152.5,2 198,47.5 198,50 " />
        </symbol>
        <symbol id="bottomRight" viewBox="0 0 200 200">
            <path class="fl" d="M198,150l0,25.3l0,11.5c0,2.7-2.2,4.9-4.9,4.9h-4.3v2.3c0,2.7-1.2,3-3.9,3l-34.9,0l0,3h14.6h4.4h17.5c2.8,0,4-1.3,4-4.1v-2.4h4.5c2.8,0,5-2.3,5-5l0-11.7l0-26.8L198,150z" />
        </symbol>
    </defs>
    <!-- top-left corner: -->
    <path class="fl" d="M50.3,0H5C2.3,0,0,2.3,0,5v45l2,0V8.9C2,6.2,4.2,5,6.9,5h43.3L50.3,0z" />

    <!-- bottom-left corner: -->
    <g transform="scale(1, -1)">
        <svg x="0" y="-100%">
            <use xlink:href="#bottomLeft" width="200" height="200" y="-200" transform="scale(1, -1)" />
        </svg>
    </g>

    <!-- top-right corner: -->
    <g transform="scale(-1, 1)">
        <svg x="-100%" y="0">
            <use xlink:href="#topRight" width="200" height="200" x="-200" transform="scale(-1, 1)" />
        </svg>
    </g>

    <!-- bottom-right corner: -->
    <g transform="scale(-1, -1)">
        <svg x="-100%" y="-100%">
            <use xlink:href="#bottomRight" width="200" height="200" y="-200" x="-200" transform="scale(-1, -1)" />
        </svg>
    </g>

    <!-- top edge: -->
    <rect class="fl" x="50.2" y="0" width="100%" height="2" mask="url(#mask-top-bottom)" />
    <!-- bottom edge: -->
    <rect class="fl" width="100%" height="2" y="-100%" mask="url(#mask-bottom)" transform="scale(1,-1)" />
    <!-- right edge: -->
    <rect class="fl" height="100%" width="2" x="-100%" mask="url(#mask-right)" transform="scale(-1,1)" />
    <!-- left edge: -->
    <rect class="fl" width="2" height="100%" mask="url(#mask-left-right)" />
</svg>

.面具{
填充物：白色；
笔画：黑色；
笔划宽度：100px；
}
.fl{
填料：#01A7CC；
}

如果我移除遮罩，我会在FF中看到该行。只是指出问题就在这里：谢谢@Duopixel你是对的，我错过了。Firefox似乎有自己的SVG掩码规则。你知道我如何调整它，使它在所有现代浏览器上都能正常工作吗？我最初是从一个没有详细研究过的地方得到这个方法的想法的，但是如果我去掉了在FF中出现的线的遮罩，它可能会出现。只是指出问题就在这里：谢谢@Duopixel你是对的，我错过了。Firefox似乎有自己的SVG掩码规则。你知道我如何调整它，使它在所有现代浏览器上都能正常工作吗？我最初是从一个没有详细研究过的地方得到这个方法的想法的，但它可能是