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

Question

我正在制作一组使用动态渐变的按钮。我已经通过使用 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 文件。

Answer 1

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

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

Answer 2

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

Answer 3

您可以做的是首先加载包含所有定义的 SVG 文件，然后加载其他 SVG 文件。

使用 Firefox、 jQuery SVG 以及框架的一个小镜头...

的 XHTML 中

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

在您 JavaScript：

    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);} });
      }
    }

因为 id 可以在文档范围内找到，所以 SVG 能够找到 IRI 引用。

这允许您一次定义事物（否则不会在 css 中定义）并避免 id 冲突。

干杯，
克里斯托弗·史密森