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

我正在制作一组使用动态渐变的按钮。我已经使用了Firefox3.6+和WebKit专有的CSS扩展，我所需要做的就是通过使用背景图像url（“gradient.svg”）来支持Opera、iOS和IE9

这是相对容易的，我制作了一个SVG文件，将其链接并使其工作。然而，我正在做一个设置，所以我需要至少6个渐变。当我通常在图像中这样做时，我会创建一个用于快速HTTP访问的精灵。我不知道如何在SVG中实现这一点——我可以像XBL那样使用一个文件并使用#标识符访问其XML的不同部分吗

我当前的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> 

我想这样做：

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

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

---

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

从理论上讲，这是可能的。您可以使用2个参数来设置两种颜色，您可以创建多个具有不同渐变的矩形，高度设置为0，然后只生成一个100%（如？gradient2=100%）

如果您只需要按钮背景的渐变，大部分可以在css中实现。对于其余浏览器，ie6+可以使用ms过滤器：

---

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

您可以先加载包含所有定义的svg文件，然后再加载其他svg文件

使用Firefox和框架的一个小镜头

在XHTML中：

    <div id="common_svg_defs"><!--ieb--></div>
    <div id="first_thing"><!--ieb--></div>
    <div id="second_thing"><!--ieb--></div>

因为可以在documents范围内找到id，SVG能够找到IRI引用

这允许您只定义一次（在css中无法定义），并避免id冲突

干杯，

---

克里斯托弗·史密森

你试过了吗？失败了吗？如果是，如何/使用哪个错误消息？@Mvan:错误消息？从HTML和CSS？我看到Firefox给出了CSS警告。我想。。。Hi@riddle-检查一下，您可能可以复制他们的一些实现。哦-如果您想进行实验，请下载原始的button.svg文件-页面上的源代码也缺少ref.js脚本-下载ref.js，因为我认为目前没有浏览器本机实现该规范是针对svg 2.0的，因此，我暂时不希望它被任何浏览器实现。是的，但通过一点javascript，它正在工作——页面中的原始按钮：utton.svg？color=cornflowerblue&text label=fnord-使用url参数修改：

    <div id="common_svg_defs"><!--ieb--></div>
    <div id="first_thing"><!--ieb--></div>
    <div id="second_thing"><!--ieb--></div>

    var do_stuff = function()
    {
      // load your common svg file with this goo.
      $('#common_svg_defs').svg({
        loadURL: 'path/filename.svg',
        onLoad: function(svg, error) { run_test(svg, error);} });
    }

    var run_test = function(svg, error)
    {
      if (typeof(error) !== "undefined")
      {
        if (typeof(console.log) !== "undefined")
        {
          console.log(error);
        }
      }
      else
      {
        // load your other svg files here, or just
        // set a flag letting you know it's ready.
        $('#first_thing').svg({
          loadURL: 'path/anotherfilename.svg',
          onLoad: function(svg, error) { somecallback(svg, error);} });
        $('#second_thing').svg({
          loadURL: 'path/anotherfilename.svg',
          onLoad: function(svg, error) { somecallback(svg, error);} });
      }
    }