Question

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

<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>引用它并显示OK。我已经尝试比较单个图像的XML及其在精灵中的符号，并且据我所知它们是相同的（包括与图像相关的<defs>部分的部分）。

Answer 1

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

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

1 个答案: