W3C home > Mailing lists > Public > www-svg@w3.org > February 2002

Re: Scaling text object in synch. with graphic object

From: iztok jeras <iztok.jeras@rattus.info>
Date: Thu, 28 Feb 2002 09:45:07 +0100 (CET)
To: Paul Haddock <phaddock4@home.com>
Message-ID: <1014885907.3c7dee13e5026@webmail.domenca.com>
Cc: www-svg@w3.org
The yahoo svg-developers group is more apropriate for this kind of questions.

You should use animate Transform for scaling and animate the whole txtSphere
<animateTransform attributeName=\"transform\" attributeType=\"scale\"....
and not the sphere and text element separately

Description of what you have done wrong:
The text is alined to the left but the circle is alined to its center.

iztok jeras

Citiranje Paul Haddock <phaddock4@home.com>:

> 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-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>

iztok jeras
Received on Thursday, 28 February 2002 03:46:01 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:46:52 UTC