一个SVG文件，里面有许多SVG渐变 [英] One SVG file, many SVG gradients inside
问题描述
我制作一组使用动态渐变的按钮。我已经照顾Firefox 3.6+和WebKit通过使用他们专有的CSS扩展，我需要做的是支持Opera，iOS和IE9通过使用background-image：url（gradient.svg）。
I’m making a set of buttons which use dynamic gradients. I’ve taken care of Firefox 3.6+ and WebKit by using their proprietary CSS extensions and all I need to do is support Opera, iOS and IE9 by using background-image: url("gradient.svg").
这是比较容易的，我做了一个SVG文件，链接它，让它工作。但是，我做一个集，所以我需要至少6个渐变。当我通常在图像中做，我创建一个sprite快速HTTP访问。我不知道如何在SVG中实现这一点 - 我可以使用一个文件，并通过使用#identifiers，如XBL，访问其XML的不同部分？
This is relatively easy, I made an SVG file, linked it and got it working. However, I’m making a set so I need at least 6 gradients. When I normally do it in images, I create a sprite for fast HTTP access. I’m not sure how to achieve this in SVG – can I use one file and access different parts of its XML by using #identifiers, like XBL does?
我的当前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文件，当我可以做一个。
Is it even possible? Can you help me out? I really don’t wanna push 6 XML files when I can do it with one.
推荐答案
如果你只是想要渐变按钮背景，大多数这可以在css中实现。对于其余的浏览器，ie6 +可以使用用户ms过滤器：
http：/ /msdn.microsoft.com/en-us/library/ms532847.aspx
If you just want gradients for button backgrounds, most of this can be acheived in css. For the remaining browsers, ie6 + can user ms filters: http://msdn.microsoft.com/en-us/library/ms532847.aspx
iOS使用webkit进行渲染，因此可以使用-webkit供应商前缀。不幸的是，你仍然需要svg的歌剧，但这可以使它更容易（或只使用正常的图像精灵为歌剧的1％的用户）
iOS uses webkit to render, so you can use -webkit vendor prefix. Unfortunately you will still need svg for opera, but this may make it easier (or just use a normal image sprite for opera's 1% of users)
这篇关于一个SVG文件，里面有许多SVG渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
