html - SVG 渐变 URL 与 不兼容

Question

在 JavaScript/HTML5 网络应用程序中，我在页面的头部使用它:

<base href="{My base URL}">

确保所有对 Assets (图像等)的调用都能正确解析，无论通过 JS(pushState 等)设置的任何当前地址如何；

但是，这似乎不适用于 SVG 样式:

<svg>
    <defs>
        <linearGradient id="Gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="red" />
            <stop offset="50%" stop-color="black" stop-opacity="0" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
        <style type="text/css">
            <![CDATA[
                .my-element {
                    fill: url(#Gradient);
                }
            ]]>
        </style>
    </defs>
</svg>

该元素永远不会获得渐变填充，因为 URL 已受到基本 href 的影响。

Answer 1

只需使用绝对 URL。例如:

.my-element {
    fill: url(http://www.example.com/myapp.html#Gradient);
}