Talk About Network

Google


Register and Login
Nick
Password
Register create new account Sign up is FREE and you can post replies, new topics, bookmark posts and more!
Recover lost password


Animation > Computer Animation > Need help with ...
Latest [ Topics | Posts ] Archive Post A New Topic Post a Reply
<< Topic < Post Post 1 of 1 Topic 1036 of 1128
Post > Topic >>

Need help with SVG text animation

by phdfromic@[EMAIL PROTECTED] May 17, 2007 at 08:57 AM

My code below shows two circles, numbered 1 and 2, floating around on
paths, with their radii varying in size.   I want the tags, '1' and
'2'  to change size pro****tionately, but I cannot figure out how to do
that.

Can someone help ?


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg"
version="1.1">
<path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="none" stroke-width="0"  />
<path id="path2" d="M150,350 C 110,100 350,150 450,550"
        fill="none" stroke="none" stroke-width="0"  />

  <circle cx="600" cy="50"
        fill="red" stroke="blue" stroke-width="10"  >

<animate attributeName="r" dur="5s" repeatCount="indefinite"
 from="10" to="85"/>
<animateMotion dur="6s" repeatCount="indefinite"  >
       <mpath xlink:href="#path1"/>
</animateMotion>

</circle>

<text id="TextElement" x="590" y="55"
          font-family="Verdana" font-size="35.27" visibility="hidden"
>
      1
    <set attributeName="visibility" attributeType="CSS" to="visible"
           begin="0s" dur="6s" fill="freeze" />
    <animateMotion dur="6s" repeatCount="indefinite"  >
       <mpath xlink:href="#path1"/>
    </animateMotion>

</text>

<circle cx="100" cy="200"
        fill="blue" stroke="yellow" stroke-width="10"  >

<animate attributeName="r" dur="5s" repeatCount="indefinite"
 from="10" to="85"/>
<animateMotion dur="6s" repeatCount="indefinite"  >
       <mpath xlink:href="#path2"/>
</animateMotion>
</circle>

<text id="TextElement" x="90" y="205"
          font-family="Verdana" font-size="35.27" visibility="hidden"
>
      2
      <set attributeName="visibility" attributeType="CSS" to="visible"
           begin="0s" dur="6s" fill="freeze" />
      <animateMotion dur="6s" repeatCount="indefinite"  >
       <mpath xlink:href="#path2"/>
      <animateTransform attributeName="transform" attributeType="XML"
           type="font-size" from="1" to="3"
           begin="0s" dur="6s" fill="freeze" />
    </animateMotion>

    </text>

</svg>
 




 1 Posts in Topic:
Need help with SVG text animation
phdfromic@[EMAIL PROTECTE  2007-05-17 08:57:10 

Post A Reply:
  Go here to Signup

AddThis Feed Button


About - Advertising - Contact - Frequently Asked Questions - Privacy Policy - Terms of Use - Signup

Contact
tan12V112 Sun Jul 27 3:36:51 CDT 2008.