EDN Admin
Well-known member
Ive been following many examples for creating a linear gradient using XSL, but for some reason, Ive not been able to accomplish this task. All the examples seem pretty straightforward, but Im not able to get the color applied.
Below is my XSL for the gradient.
<div style="color:Black;background-color:White; <pre>
<span style="color:Blue; <<span style="color:#A31515; xsl<span style="color:Blue; :<span style="color:#A31515; template <span style="color:Red; name<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; svg-defs<span style="color:Black; "<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; svg <span style="color:Red; height<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; width<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; xmlns:xlink<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; http://www.w3.org/1999/xlink<span style="color:Black; "<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; defs<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; linearGradient <span style="color:Red; id<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; SFPurple<span style="color:Black; "
<span style="color:Red; x1<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 0%<span style="color:Black; " <span style="color:Red; y1<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 0%<span style="color:Black; "
<span style="color:Red; x2<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; y2<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 0%<span style="color:Black; "
<span style="color:Red; spreadMethod<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; pad<span style="color:Black; "<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; stop <span style="color:Red; offset<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 10%<span style="color:Black; " <span style="color:Red; stop-color<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; #F2EFFB<span style="color:Black; " <span style="color:Red; stop-opacity<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 5<span style="color:Black; "<span style="color:Blue; />
<span style="color:Blue; <<span style="color:#A31515; stop <span style="color:Red; offset<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; stop-color<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; #240B3B<span style="color:Black; " <span style="color:Red; stop-opacity<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 5<span style="color:Black; "<span style="color:Blue; />
<span style="color:Blue; </<span style="color:#A31515; linearGradient<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; defs<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; h1 <span style="color:Red; height<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 50px<span style="color:Black; " <span style="color:Red; width<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; style<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; fill:url(#SFPurple);<span style="color:Black; "<span style="color:Blue; >
Some<span style="color:Blue; <<span style="color:#A31515; span <span style="color:Red; style<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; font-style:italic;<span style="color:Black; "<span style="color:Blue; >Text<span style="color:Blue; </<span style="color:#A31515; span<span style="color:Blue; > Here
<span style="color:Blue; </<span style="color:#A31515; h1<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; svg<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; xsl<span style="color:Blue; :<span style="color:#A31515; template<span style="color:Blue; >
[/code]
<br/>
If I use one of the stop colors for the background, I.E. style="background:#F2EFFB", then I get that color, but the fill:url(#F2EFFB) doesnt seem to work for me at all.
Any suggestions would be greatly appreciated.
TIA,
Chris
View the full article
Below is my XSL for the gradient.
<div style="color:Black;background-color:White; <pre>
<span style="color:Blue; <<span style="color:#A31515; xsl<span style="color:Blue; :<span style="color:#A31515; template <span style="color:Red; name<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; svg-defs<span style="color:Black; "<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; svg <span style="color:Red; height<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; width<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; xmlns:xlink<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; http://www.w3.org/1999/xlink<span style="color:Black; "<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; defs<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; linearGradient <span style="color:Red; id<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; SFPurple<span style="color:Black; "
<span style="color:Red; x1<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 0%<span style="color:Black; " <span style="color:Red; y1<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 0%<span style="color:Black; "
<span style="color:Red; x2<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; y2<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 0%<span style="color:Black; "
<span style="color:Red; spreadMethod<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; pad<span style="color:Black; "<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; stop <span style="color:Red; offset<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 10%<span style="color:Black; " <span style="color:Red; stop-color<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; #F2EFFB<span style="color:Black; " <span style="color:Red; stop-opacity<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 5<span style="color:Black; "<span style="color:Blue; />
<span style="color:Blue; <<span style="color:#A31515; stop <span style="color:Red; offset<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; stop-color<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; #240B3B<span style="color:Black; " <span style="color:Red; stop-opacity<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 5<span style="color:Black; "<span style="color:Blue; />
<span style="color:Blue; </<span style="color:#A31515; linearGradient<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; defs<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; h1 <span style="color:Red; height<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 50px<span style="color:Black; " <span style="color:Red; width<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; 100%<span style="color:Black; " <span style="color:Red; style<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; fill:url(#SFPurple);<span style="color:Black; "<span style="color:Blue; >
Some<span style="color:Blue; <<span style="color:#A31515; span <span style="color:Red; style<span style="color:Blue; =<span style="color:Black; "<span style="color:Blue; font-style:italic;<span style="color:Black; "<span style="color:Blue; >Text<span style="color:Blue; </<span style="color:#A31515; span<span style="color:Blue; > Here
<span style="color:Blue; </<span style="color:#A31515; h1<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; svg<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; xsl<span style="color:Blue; :<span style="color:#A31515; template<span style="color:Blue; >
[/code]
<br/>
If I use one of the stop colors for the background, I.E. style="background:#F2EFFB", then I get that color, but the fill:url(#F2EFFB) doesnt seem to work for me at all.
Any suggestions would be greatly appreciated.
TIA,
Chris
View the full article