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>
<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>
<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>
<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>
There are no comments on this page. [Add comment]