SVG to CSS Help for Linear Gradient

Question

Below is the linear gradient i created to skin the TabPane
SVG code
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="6.4492" y1="95.292" x2="1186.2246" y2="95.292">
     <stop offset="0" style=stop-color:#C2B59B;stop-opacity:0.43"/>
     <stop offset="0" style=stop-color:#E2DBCE;stop-opacity:0.66"/>
     <stop offset="0.7939" style=stop-color:#C2B59B;stop-opacity:0.19"/>
     <stop offset="1" style=stop-color:#C2B59B;stop-opacity:0.02"/>
</linearGradient>
Css Code i used as
#tab-pane *.tab-header-background {
    -fx-background-color: linear-gradient(#c2b59b 40%, #e2dbce 60%, #c2b59b 19%, #c2b59b 2%);
}Now my question is how to specify theses thing in css
x1="6.4492" y1="95.292" x2="1186.2246" y2="95.292" and offset of each stop ?
Edited by: Pugazhendhi on Apr 12, 2012 2:59 AM
Edited by: Pugazhendhi on Apr 12, 2012 2:59 AM

Answer 1

If you look at http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html#typepaint, you will see that you can give a "from <point> to <point>" in the linear-gradient.
Here is your SVG:
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="6.4492" y1="95.292" x2="1186.2246" y2="95.292">
<stop  offset="0" style="stop-color:#C2B59B;stop-opacity:0.43"/>
<stop  offset="0" style="stop-color:#E2DBCE;stop-opacity:0.66"/>
<stop  offset="0.7939" style="stop-color:#C2B59B;stop-opacity:0.19"/>
<stop  offset="1" style="stop-color:#C2B59B;stop-opacity:0.02"/>
</linearGradient>The offsets in your SVG linear gradient are percentages, not absolute values. Here, then, would be the equivalent linear-gradient (I rounded .7939 to 80%):
linear-gradient(from 6.4492 95.292 to 1186.2246 95.292, #C2B59B 0%, #E3DBCE 0%, #C2B59B 80%, #C2B59B 100%)Having two color stops at 0% seems like a mistake.
I also doubt that you want the absolute x1,y1 and x2,y2 values. You need to ask yourself what direction you want the gradient to go. It looks to me like this is going "to right" (since y1==y2). So, it is more likely that you want:
linear-gradient(to right, #C2B59B 0%, #E3DBCE 0%, #C2B59B 80%, #C2B59B 100%)The thing I didn't do here is to include the opacity from the svg stops. There are a few things you can do to solve that but the easiest is to translate the stop-opacity into a hex two hex digits and add those to the color. Just multiply the opacity by 255 and convert to hex. For example, .19 * 255 = 0x30 so the third stop would be #C2B59B30. Note that standard CSS doesn't support this extra byte for opacity in a hex color, so you could translate the hex color and opacity to rgba - #C2B59B30 = rgba(194, 181, 155, .19)