Html SVG渐变URL不能很好地使用<；基本href>；

在JavaScript/HTML5 web应用程序中，我在页面头部使用以下内容：

<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的影响。

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

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

---

这似乎更像是一个陈述而不是一个问题。你在寻找什么样的回答？问题是当页面中有基本href时，如何添加渐变填充，因为我不能。将URL设置为绝对URL你成功尝试过吗？这对我不起作用。我试着把它放在CSS和fill属性中，但没有成功。抱歉-菜鸟错误-我想我可以提供一个指向另一个位置的绝对url并将SVG保存在那里。如果我只是对我正在查看的页面做一个绝对值，它就会工作。