渐变不适用于网页上的内联 SVG

Question

我有一个 SVG sprite，它内嵌在一个包含多个图像作为符号的网页中，其中一些图像具有在 SVG 的 <defs> 部分中定义的渐变填充。但是，当我尝试通过使用 <use> 标记来使用页面上的任何图像时，图像会显示，但没有任何渐变。例如

<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
                <linearGradient id="foo" />
            </defs>
            <symbol id="bar">
                <path fill="url(#foo)">
            <symbol>
        </svg>

        <!-- This displays the image contained in the symbol #bar but doesn't show the gradient defined in #foo -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use xlink:href="#bar" />
        </svg>
    </body>
</html>

我相信这是包含渐变的正确方法，defs 部分定义在符号外。但是它在 chrome、firefox 或 IE11 / Edge 中不起作用（实际上在 IE / Edge 中它也没有正确显示图像，但现在我很想为此归咎于 IE）所以因为它在任何现代浏览器中都不起作用我猜这是我的错误。

这当然是一个非常简单的例子，SVG 精灵是用 grunt SVG-store 生成的几个图像的合成，但是如果我尝试，单个图像确实显示正常像这样在页面上显示它：

<img src="bar.svg" />

所以 SVG 本身似乎是正确的。我也试过在页面上只放置一张精灵内联图像（稍微修改一下，所以它是一个如上所述的符号）并用 <use> 引用它，它显示正常。我已经尝试比较单个图像的 XML 及其在精灵中的符号，据我所知它们是相同的（包括与图像相关的 <defs> 部分的部分）。

Answer 1

问题是因为精灵在 css 中用 display: none 隐藏了，否则浏览器会将其包含在流中并为其分配 space 因为它位于顶部的 body。删除了 display:none 并将其更改为 position:absolute; left: 9999px;

渐变不适用于网页上的内联 SVG

Gradients not working for inline SVG on webpage

html

svg

grunt-svgstore