6
edits
Changes
Jump to navigation
Jump to search
Line 138:
Line 138: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Development Team/Almanac/Making Icons (view source)
Revision as of 22:33, 26 August 2010
, 22:33, 26 August 2010how to use gradients
</svg>
</svg>
</nowiki>
</nowiki>
== Using gradients ==
"Is there a way to render gradients using the fill color? For example, if the child's XO fill color is red, I would like to render an activity icon using a red gradient.''
Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:
<math><?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [
<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FF0000">]>
<svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
<g display="block" id="activity-example">
<rect display="inline" fill="&fill_color;" height="30.771" width="41.438" x="6.705" y="12.213"/>
<linearGradient
id="gra"
gradientUnits="userSpaceOnUse"
x1="0"
y1="9"
x2="0"
y2="53"
>
<stop
offset="0.1044"
style="stop-color:#0;stop-opacity:0" />
<stop
offset="0.1813"
style="stop-color:#0;stop-opacity:0"/>
<stop
offset="0.489"
style="stop-color:#0;stop-opacity:.3"/>
<stop
offset="0.9451"
style="stop-color:#0;stop-opacity:.6"/>
</linearGradient>
<rect display="inline" fill="url(#gra)" height="30.771" stroke="0" stroke-linejoin="round" stroke-width="3.5" width="41.438" x="6.705" y="12.213"/>
<circle cx="27.504" cy="27.598" display="inline" fill="&stroke_color;" r="2.946"/>
</g>
</svg></math>
== See also ==
== See also ==