I am creating a set of buttons that use dynamic gradient. I used my proprietary CSS extension to firefox 3.6 + And WebKit has taken care of and whatever I have to do, support Opera, iOS and IE 9 using background-image: url ("gradient.svg").
It is relatively easy, I have created a SVG file, it has linked and it is working, however, I am creating a set so that I need at least 6 gradient. When I usually do in images, I make a ghost for fast HTTP access. I'm not sure how to get it in SVG - can I use #identifiers by accessing different parts of my XML using a file like XBL?
My current SVG:
& Lt; Off offset = "100%" stop-color = "RGB (207,233,241)" /> & Lt; / LinearGradient & gt; & Lt; Style type = "text / css" & gt; Rect {fill: url (# select-gradient); } & Lt; / Style & gt; & Lt; / Defs & gt; & Lt; Rect x = "0" y = "0" rx = "6" ry = "6" height = "100%" width = "100%" /> & Lt; / Svg & gt; And then I have CSS:
.button-1 {background-image: url ("gradient-1.svg"); }. Button 2 {background-image: url ("gradient-2.svg"); } I have to do something like this:
.button-1 {background-image: url ("gradient.svg # gradient1"); }. Button -2 {background-image: url ("gradient.svg # gradient2"); } Is this possible? Could you help me? I really do not want to push 6 XML files when I can do it together.
If you want the gradients for the button background, most of these can be obtained in CSS. For the remaining browsers, i.e. 6+ user can filter MS:
IOS uses webcate to render, so that you can use the vendor's sub-field. Unfortunately you will still need SVG for Opera, but it can be easy (or only for normal users using Opera Image Sprite for Opera)
Comments
Post a Comment