一个SVG文件，内部有很多SVG渐变

我正在制作一组使用动态渐变的按钮。我已经通过使用其专有的CSS扩展照顾了Firefox 3.6+和WebKit，我需要做的就是使用background-image：url（“gradient.svg”）来支持Opera，iOS和IE9。一个SVG文件，内部有很多SVG渐变

这是相对容易的，我做了一个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"); 
}

它甚至有可能？你能帮我吗？我真的不想推6个XML文件，我可以用它来做。

来源

2010-06-19 riddle

你试过了吗？它失败了吗？如果是，如何/与哪个错误信息？ – MvanGeest 2010-06-19 14:19:37

@Mvan：错误讯息？从HTML和CSS？ – Joey 2010-06-19 14:26:15

我看到Firefox给出CSS警告。我猜。 ... – MvanGeest 2010-06-19 15:12:32

理论上 - 根据SVG documentation #Params这是可能的。你可以使用2个参数设置两种颜色，你可以创建不同梯度的多个矩形，高度设置为0，然后只有一个100％（如？gradient2 = 100％）

来源

2010-06-19 14:58:02 shw

哦 - 并下载原始button.svg文件，如果你想实验 - 页面上的源代码丢失ref.js脚本也 - 下载参考。js，因为我认为现在没有浏览器在本地实现它 – shw 2010-06-19 15:02:15

该规范适用于SVG 2.0，所以我不希望它在一段时间内被任何浏览器实现。 – 2010-08-30 18:16:18

是的 - 但有一个JavaScript的工作原理 - 从页面原始按钮：utton.svg？color = cornflowerblue＆text-label = fnord - 用url修改参数：http://www.w3.org/TR/2009/WD- SVGParamPrimer-20090430/button.svg？颜色为红色和文字的标签=工作 – shw 2010-09-20 21:20:45

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

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

来源

2010-10-11 04:44:21 tiltos

你可以做的是加载包含所有定义的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冲突。

干杯，克里斯托弗史密森

来源

2011-05-03 17:52:02

一个SVG文件，内部有很多SVG渐变

回答

相关问题