相关疑难解决方法(0)

我正在制作一组使用动态渐变的按钮.我通过使用他们专有的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文件,当我可以用一个.

我想要一个SVG图像(预渲染,但在svg标签中插入js,以允许进一步操作)能够使用"pattern"标签使用预定义的模式.听起来很简单,不是吗？好吧,事实证明Chrome(Webkit？)的行为与其他任何浏览器都有所不同,现在我不确定实现这一目标的最佳方法是什么.

我的svg看起来像这样:

<svg>
 <defs>
  <pattern id="specialPattern">...</pattern>
 </defs>
 <path class="special"></path>
</svg>

并且我希望类中的路径special具有"模式"作为填充.

尝试一个:在Chrome中运行,而不是在FF或Opera中运行

我的第一次尝试就是把它放在我的CSS中:

 .special { fill:url("#specialPattern");}

这实际上适用于Chrome,但是当你想到它时,它可能不应该.我尝试的其他浏览器将此url解释为相对于它所在的文件(css文件),这更有意义.

尝试二:适用于FF和Opera,而不是Chrome

下一次尝试:为模式提供绝对URL.

 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

虽然这在FF和Opera中可以正常工作,但Chrome现在重置了填充(我不知道它实际上在寻找那种风格)

尝试三:工作,种类

内联SVG中的样式可以在任何地方使用: style="fill:url('#specialPattern')"

虽然我猜这是内容和演示之间的界限模糊的情况,但在我的情况下,至少将样式decclarations保存在其他地方会更好(尤其是因为这会使我的SVG需要更大)

尝试四:工作(？)但很脏

我没有测试过很多浏览器,所以我不确定它是如何防水的,但在我看来,使用css hack来检测webkit浏览器会起作用:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .special {fill: url("#specialPattern");}
}
 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

现在,必须有一种更优雅的方式来解决这个问题.应该怎么做？

编辑:原来IE的行为与Chrome一样,所以你还需要确保IE <= 9有'fill:url(#specialPattern)'

可能重复:
在SVG中包含SVG文件

SVG中的fill属性接受一个url来指向一个渐变/模式元素,一个所谓的'paint server'的实例.

问题:是否可以在任何浏览器(当然,不是IE)中使用外部SVG文件中定义的渐变？喜欢,在rect.svg,

<rect fill="url(grad.svg#my_grad)" />

和相应的<linearGradient />元素grad.svg？

这将是非常好的,因为那时可以将他的所有渐变/模式存储在一个文件中并获得缓存...

干杯,

更新:这个问题,就其含义而言,是SVG中包含SVG文件的副本(其中问题至少得到了Firefox的回答).我保持开放,因为我认为标题和标签更有可能被你找到.