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

【问题标题】：Gradients not working for inline SVG on webpage渐变不适用于网页上的内联 SVG
【发布时间】：2016-08-15 21:05:01
【问题描述】：

我有一个内嵌在网页中的 SVG 精灵，其中包含多个图像作为符号，其中一些图像具有在 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 sprite 是由 grunt SVG-store 生成的多个图像的合成，但是如果我尝试在页面上显示单个图像确实可以正常显示像这样：

<img src="bar.svg" />

所以 SVG 本身似乎是正确的。我还尝试在页面上仅放置一个内联精灵中的图像（稍作修改，使其成为上面的符号）并用<use> 引用它，它显示OK。我尝试比较单个图像的 XML 及其在精灵中的符号，据我所知，它们是相同的（包括与图像相关的 <defs> 部分的部分）。

【问题讨论】：

你的渐变没有停止。
@RobertLongson 这只是一个非常缩小的示例，用于显示渐变的位置
这让我们其他人很难确定你的错误在哪里，不是吗？
@RobertLongson 我只包含它以显示我引用的图像的结构，如问题中所述，如果单独包含图像本身似乎显示正常，只有当它被引用为一个符号是它引起了问题。我认为这个问题是由 <use> 引用引起的。碰巧这与此无关，对不起，如果我不是很清楚

标签： html svg grunt-svgstore

【解决方案1】：

问题是因为精灵在 css 中被 display: none 隐藏，否则浏览器会将其包含在流中并为其分配空间，因为它位于主体的顶部。把display:none去掉，改成position:absolute; left: 9999px;

【讨论】：

您应该删除您的问题，因为它与 SVG 渐变完全无关。
@BrandonHill 该信息可能不仅限于特定的渐变，但问题是如果使用display: none 隐藏了 SVG 精灵，则定义中的渐变不起作用。我不知道defs中的其他内容可能是这样，但我认为这是有用的信息