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

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

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

Answer 2

理论上 - 根据SVG documentation #Params，这是可能的。您可以使用2个参数来设置两种颜色，您可以使用不同的渐变创建多个rects，将高度设置为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冲突。

干杯，克里斯托弗史密森

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

3 个答案: