0

我有一个嵌入在网页中的 SVG 精灵，其中包含多个图像作为符号，其中一些图像具有<defs>在 SVG 部分中定义的渐变填充。但是，当我尝试通过使用<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>图像相关的部分）。

4

1 回答 1

0

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

于 2016-04-22T09:59:29.557 回答