SVG渐变网址与<base href =“”/>不兼容

Question

在JavaScript / HTML5网络应用中，我在页面的头部使用了这个：

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

确保所有对资产的调用 - 图像等 - 无论通过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

只需使用绝对网址即可。例如：

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