SVG 不会出现在 Firefox 中

Question

我在 HTML 页面中嵌入了 SVG。一切正常，但不是 Firefox...
我读过 Firefox 对 SVG 的解释非常严格，所以我尝试了很多方法来使我的 SVG 完美。但根据 Firefox，这还不够……
这是它的一部分，没有所有路径（在尝试之前）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="86" viewBox="0 0 320 86">
    <defs>
        <style type="text/css">
            .cls-1 {
                fill: transparent;
                fill-rule: evenodd;
                stroke: #fff;
                stroke-width: 6px;
            }
        </style>
        <clipPath id="clip">
            <use xlink:href="#cls-1-path"/>
        </clipPath>
    </defs>
    <path d="M319.604,36.098 C319.409,...5.551 103.736,5.687 103.192,5.881 Z" class="cls-1" id="cls-1-path" clip-path="url(#clip)"/>
</svg>

你知道我应该怎么做吗？

谢谢你:)

Answer 1

嗯，并不是什么都没有。您刚刚在#ffffff 背景上选择了带有#fff 白色笔划的fill: transparent;。

白底白字不可见 :-)

也许 FireFox 对 #fff 的解释与其他浏览器不同 - 为 #FFFFFF 而不是 #FFF000。

为了完整起见，我附上我的（经过最少修改的）测试用例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="86" viewBox="0 0 320 86">
    <defs>
        <style type="text/css">
            .cls-1 {
                fill: transparent;
                fill-rule: evenodd;
                stroke: #fff444;
                stroke-width: 6px;
            }
        </style>
        <path id="cls-1-path" d = "M 0 0 L 550 230 L 160 0"/>
        <clipPath id="clip">
            <use xlink:href="#cls-1-path"/>
        </clipPath>
    </defs>
    <path d="M319.604,36.098 C319.409, 5.551 103.736,5.687 103.192,5.881 Z" class="cls-1" id="cls-1-path" clip-path="url(#clip)"/>
</svg>