Scaling text object in synch. with graphic object

Dear Group:

I am new to coding svg but have had some limited success, so far.  Currently I have a graphic group containing a circle and some text elements, similar to the following scheme: <g> <text.../> <circle.../> </g>.  I subsequently coded both elements to move along the same visual path (two distinct code paths, but close enough that when executed the pair of elements seem to move in tandem to the viewer) and then scale them also.  However, my scaling does not produce the desired results as the elements diverge greatly during execution.  Any helpful thoughts, comments or examples would be very appreciated.  Respectfully, Paul Haddock

Here is the actual code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="100%" height="100%" id="TestPage">
	<desc>
		<!--This is a test svg page-->
	</desc>
	<g id="txtSphere" transform="translate(30, 100)">
		<g id="txt">
			<text id="Text" style="fill: #000033; font-size: 16">SVG Text</text>
				<animate attributeName="font-size" attributeType="css" begin="0s" dur="4s" repeatCount="0" 								values="16;16;0" xlink:href="#Text" />
				<animateMotion values="-30,175; 218,175; 218, 12" begin="0s" dur="4s" calcMode="linear" fill="freeze"/>
		</g>
		<g id="Circle">
			<circle id="blueCircle" cx="0" cy="20" r="35" fill="blue" fill-opacity=".5" stroke="orange" stroke-width="2">
				<animate attributeName="r" attributeType="XML" begin="0s" dur="4s" repeatCount="1" 								values="35;35;0" xlink:href="#blueCircle" />
				<animateMotion values="0,150; 248,150; 248, -17" begin="0s" dur="4s" calcMode="linear" fill="freeze"/>
			</circle>
		</g>
	</g>
</svg>