7. Format

So far, the mallets were just simple circles. They must have handles. To move a mallet and its handle as a group, you define translate in transform attribute of group tag. It is not a pair of attributes like cx and cy of circle element. But you can still handle it as a pair of values by using stasc format tag. In Table.ss.xml, for example, transform attribute of your mallet is controlled as follows:
<ss:attribute target="transform">
  <ss:format>translate(<ss:item name="YouX">160</ss:item> 400)</ss:format>
</ss:attribute>
Initial value of the transform attribute is "translate(160 400)" and the x coordinate is refered as YouX.
Contents of HowToPlay.html and ViewRecipes.html are still the same but they look up to date. They use Stasc.js so your changes are already reflected.
<<