Firefox 上的 SVG 渲染问题

Question

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

这是 SVG 代码：http://jsfiddle.net/0g5sjuyv/

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

如您所见，右侧和底部边缘根本没有显示。首先，我认为应用的蒙版有问题，但没有（编辑：似乎有）。然后我想也许 Firefox 不支持直接在 <use> 元素上应用转换，但似乎这也不是这个问题的原因。

如果您能对此事有所了解，我将不胜感激。

Answer 1

感谢@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>