SVG描边URL：线性渐变有效，但纯色无效。

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>

< p>第一个引用 color_1 的 rect 可以工作，但是第二个引用 color_2 的没有可用。即使是在 w3.org 的示例 中也无法工作。链接应该显示为红色的形状。这在 Firefox、Chrome 和 Safari 中发生（或不发生）。

是否有缺失的内容？

试一下： jsFiddle

- lampshade

---

有什么东西缺失吗？我会说浏览器实现，但我不确定。似乎<solidColor>是SVGTiny1.2规范的一部分，不知道今天浏览器如何支持它... - Kaiido

@Kaiido 我没有注意到这是 1.2。那可能就是缺少浏览器实现的问题。 - lampshade

http://www.w3schools.com/svg/tryit.asp?filename=trysvg_stroke0 - Tony Wu

Answer 1

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

我有一个Firefox的补丁，可以实现solidColor，但唯一支持它的其他UA是现在已经过时的Opera版本12。

考虑到它可以通过单个停止渐变或通过CSS变量来模拟，因此solidColor似乎相当不必要。如果您能说服其他UA考虑实现它，那么我的Firefox补丁就可以使用。

- Robert Longson

Answer 2

SolidColor在任何浏览器中都不受支持。它也在svg2工作草案中提到，但我不知道它何时会被实现。

或者你可以使用以下替代方案：

<rect x="50%" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="blue" stroke-opacity="1"/>

或者

    <linearGradient id="color_2">
        <stop offset="0%" stop-color="blue" stop-opacity="1"/>
        <stop offset="100%" stop-color="blue" stop-opacity="1"/>
    </linearGradient>

- Lemnis