You may declare fill styles using the fill node name. Fill styles always have a type attributes. The types of fills supported so far are solid, linear and radial.




Solid color fills


Use type solid for a solid color fill. The fill node always has one color node that specifies the fill color. The fill can be completely opaque like the box on the left, or have transparency applied to using the alpha attribute like the box on the right.

SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
    <style>
        <fill style="sampleFillBlue" type="solid">
            <color>0x0000ff</color>
        </fill>
        <fill style="sampleFillRed" type="solid">
            <color alpha=".5">0xff0000</color>
        </fill>
    </style>
    <box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
    <box width="200" height="100" x="30" y="30" fill="sampleFillBlue"/>
    <box width="200" height="100" x="330" y="30" fill="sampleFillRed"/>
</composer>

OUTPUT





Linear gradient fills


Use type linear for a linear gradient fill. The fill node always has two or more color nodes that specify the gradient colors. The gradient can be completely opaque like the box on the left, or have transparency applied to using the alpha attribute like the box on the right. Control the gradient stop proportions by setting the ratio attribute between 0 and 255. Alternatively you can specify gradient stops as percentage values such as 50%. You may have as many stops in your gradient as you like but keep performance in mind!

SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
    <style>
        <fill style="sampleGradientLeft" type="linear" angle="90">
            <color ratio="0">0x0000ff</color>
            <color ratio="128">0xffff00</color>
            <color ratio="255">0xff0000</color>
        </fill>
        <fill style="sampleGradientRight" type="linear">
            <color alpha="0" ratio="0">0xff0000</color>
            <color alpha="1" ratio="255">0xff0000</color>
        </fill>
    </style>
    <box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
    <box width="200" height="100" x="30" y="30" fill="sampleGradientLeft"/>
    <box width="200" height="100" x="330" y="30" fill="sampleGradientRight"/>
</composer>

OUTPUT





Radial gradient fills


Use type radial for a radial gradient fill. Pretty much the same rules apply as for the linear gradient: the fill node always has two or more color nodes that specify the gradient colors. The gradient can be completely opaque or have transparency applied to. Control the gradient stop proportions by setting the ratio attribute between 0 and 255. Alternatively you can specify gradient stops as percentage values such as 50%. You may have as many stops in your gradient as you like but keep performance in mind!

For radial gradient fill you may also set a focalpointratio attribute that controls the offset of the radial gradient like the box on the right. Use a value from 0 to 2 to control the center of the gradient from the center all the way to the edge.

SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
    <style>
        <fill style="sampleGradientLeft" type="radial">
            <color ratio="0">0x0000ff</color>
            <color ratio="255">0xff0000</color>
        </fill>
        <fill style="sampleGradientRight" type="radial" focalpointratio="2">
            <color ratio="0">0x0000ff</color>
            <color ratio="255">0xff0000</color>
        </fill>
    </style>
    <box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
    <box width="200" height="100" x="30" y="30" fill="sampleGradientLeft"/>
    <box width="200" height="100" x="330" y="30" fill="sampleGradientRight"/>
</composer>

OUTPUT

There are no comments on this page. [Add comment]

Valid XHTML 1.0 Transitional :: Valid CSS :: Powered by WikkaWiki