Development Team/Almanac/Making Icons: Difference between revisions
m moved Walter is a wanker 12/Almanac/Making Icons to Development Team/Almanac/Making Icons over redirect: revert |
how to use gradients |
||
| Line 138: | Line 138: | ||
</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 == | ||