一个 SVG 文件，里面有很多 SVG 渐变

我正在制作一组使用动态渐变的按钮。我已经通过使用 Firefox 3.6+ 和 WebKit 专有的 CSS 扩展来处理它们，我所需要做的就是使用 background-image: url("gradient.svg") 支持 Opera、iOS 和 IE9。

这相对简单，我制作了一个 SVG 文件，链接它并让它工作。然而，我正在制作一组，所以我至少需要 6 个渐变。当我通常在图像中执行此操作时，我会创建一个精灵以进行快速 HTTP 访问。我不确定如何在 SVG 中实现这一目标 - 我可以使用一个文件并通过使用 #identifiers 访问其 XML 的不同部分，就像 XBL 那样吗？

我当前的 SVG：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="select-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="rgb(231,244,248)"/>
            <stop offset="100%" stop-color="rgb(207,233,241)"/>
        </linearGradient>
        <style type="text/css">
          rect {
          fill: url(#select-gradient);
          }
      </style>
    </defs>
    <rect x="0" y="0" rx="6" ry="6" height="100%" width="100%"/>
</svg> 

然后我有CSS：

.button-1 {
  background-image: url("gradient-1.svg");
}

.button-2 {
  background-image: url("gradient-2.svg");
}

我想做这样的事情：

.button-1 {
  background-image: url("gradient.svg#gradient1");
}

.button-2 {
  background-image: url("gradient.svg#gradient2");
}

有可能吗？你能帮我吗？当我可以用一个 XML 文件来完成时，我真的不想推送 6 个 XML 文件。

如果你只想要按钮背景的渐变，大部分都可以在 css 中实现。对于其余浏览器，ie6+可以使用ms过滤器：http://msdn.microsoft.com/en-us/library/ms532847.aspx http://msdn.microsoft.com/en-us/library/ms532847.aspx

iOS 使用 webkit 进行渲染，因此可以使用 -webkit 供应商前缀。不幸的是，opera 仍然需要 svg，但这可能会让事情变得更容易（或者对于 opera 的 1% 用户来说，只使用普通的图像精灵）