html - SVG 笔划 url : linearGradient is working but solidColor is not

Question

我试过设置描边颜色。它可以使用 linearGradient 但不能使用 solidColor :

<svg class="svg_defs" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="color_1">
            <stop offset="0" stop-color="red" stop-opacity="1"/>
        </linearGradient>

        <solidColor id="color_2" solid-color="blue" solid-opacity="1"/>

        <linearGradient id="half">
            <stop offset="50%" stop-color="green" stop-opacity="0.5"/>
            <stop offset="50%" stop-color="green" stop-opacity="0"/>
        </linearGradient>
    </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 101 101" width="50">
    <rect x="0" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="url(#color_1)"/>
    <rect x="50%" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="url(#color_2)"/>
</svg>

引用 color_1 的 rect 有效，但引用 color_2 的第二个无效。即使是 example on w3.org不工作。该链接应以红色显示表格。这在 Firefox、Chrome 和 Safari 中会发生(或不会发生)。

是不是少了什么？

尝试一下: jsFiddle

Answer 1

solidColor 不是 SVG 1.1 的一部分，它是 SVG 1.2 tiny 的一部分，并且以一种稍微改变和非向后兼容的方式被提议成为即将到来的 SVG 2 规范的一部分。

我有一个 patch对于将实现 solidColor 的 Firefox，但唯一支持它的其他 UA 是现在已经过时的 Opera 版本 12。

solidColor 似乎是不必要的，因为它可以通过单停止渐变或通过 CSS 变量来模拟。如果你能说服其他一些 UA 考虑实现它，我的 Firefox 补丁就可以落地。