一个SVG文件,里面有许多SVG渐变

Question

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

这是相对容易的,我制作了一个SVG文件,链接它并让它工作.但是,我正在制作一套,所以我需要至少6个渐变.当我通常在图像中执行它时,我创建了一个用于快速HTTP访问的sprite.我不确定如何在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");
}

它甚至可能吗？你能帮我吗？我真的不想推送6个XML文件,当我可以用一个.

Answer 1

理论上 - 根据SVG 文档 #Params这是可能的。您可以使用 2 个参数来设置两种颜色，您可以创建多个具有不同渐变的矩形，高度设置为 0，然后仅制作一个 100%（如 ?gradient2=100%）