SVG Animation

Hello,

I have prepared an SVG Animation but now I have a liitle mistake;

Description: I have a globe and words and circles rotate around it. But always when I start the SVG Animation(or click in the browser actualise) on at the head left you can see the words and circles in red.

How can I solve the problem? Thanks for help!

here is the Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"

"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd" >
<!---->
<svg>
<defs>
<radialGradient id="myRadGrad" gradientUnits="objectBoundingBox"
cx="50%" cy="50%" r="50%" fx="80%" fy="80%">
<stop offset="10%" stop-color="skyblue"/>
<stop offset="100%" stop-color="grey"/> //Farbe der Erdkugel
</radialGradient>
</defs>
<g transform='rotate(10)'>
<ellipse fill='url(#myRadGrad)' opacity='.5' stroke='black' stroke-width='.5'
cx='150' cy='150' rx='100' ry='100'/>
<g fill='none' stroke='grey' stroke-width='0.1' font-size='12' >
<defs>
<ellipse cx='150' cy='100' rx='85' ry='0'/>
<ellipse cx='150' cy='150' rx='100' ry='0'/>
<ellipse cx='150' cy='200' rx='85' ry='0'/>
</defs>
//Breitenkreise
<path d="M65,100 C85,50 215,50 235,100"/>
<path d="M55,120 C65,100 235,100 245,120"/>
<path d="M50,150 250,150"/>
<path d="M55,180 C65,200 235,200 245,180"/>
<path d="M65,200 C85,250 215,250 235,200"/>


<circle fill='red' stroke='none' cx='0' cy='0' r='2' >
<animateMotion begin='1.8s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M55,120 C65,100 235,100 245,120 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</circle>


<circle fill='red' stroke='none' cx='0' cy='0' r='2' >
<animateMotion begin='0.4s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M65,100 C85,50 215,50 235,100 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</circle>


<circle fill='red' stroke='none' cx='0' cy='0' r='2' >
<animateMotion begin='1.2s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M55,180 C65,200 235,200 245,180 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</circle>


<circle fill='red' stroke='none' cx='0' cy='0' r='2' >
<animateMotion begin='0.6s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M65,200 C85,250 215,250 235,200 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</circle>






<text fill='red' stroke='none' cx='0' cy='0' r='3' >
S<animateMotion begin='2.4s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
h<animateMotion begin='2.2s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
a<animateMotion begin='2.0s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
p<animateMotion begin='1.8s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
e<animateMotion begin='1.6s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
-<animateMotion begin='1.4s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
M<animateMotion begin='1.2s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
a<animateMotion begin='1.0s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
n<animateMotion begin='0.8s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
a<animateMotion begin='0.6s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
g<animateMotion begin='0.4s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
e<animateMotion begin='0.2s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>
<text fill='red' stroke='none' cx='0' cy='0' r='3' >
r<animateMotion begin='0.0s' dur="3.5s" rotate='auto' fill='freeze' repeatCount="indefinite"
path="M50,150 250,150 " />
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

repeatCount='indefinite'
values='red;none' calcmode='discrete' />
</text>


//L?ngengkreise
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='0s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='0.25s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='0.5s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='0.75s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='1.0s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='1.25s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='1.5s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='1.75s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='2s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
<path d="M150,50 C17,55 17,245 150,250">
<animate attributeName='d' begin='2.25s' dur='2.5s' attributeType="XML" fill='freeze'

repeatCount='indefinite'
values='M150,50 C17,55 17,245 150,250 ; M150,50 C283,55 283,245 150,250' />
</path>
</g>
</g>
</svg>

I don't know what you are waiting for but you have to replace , by . in dur values as
<animateColor attributeName='fill' begin='0.5s' dur='3,5s' attributeType="CSS"

Replacing , by ., circles and text are show / hide / show ......

Michel

Sorry, but I don't really understand what you mean?


Maybe you can explain it again!

Replace
dur='3,5s'
by
dur='3.5s'

decimal separator is . not ,

Michel

Sorry but this is not the reason for my problem.

Perhaps you try to start the SVG Code and then you can see that at the head left in the viewbox there are red words and circles(very small).

How can I delete this?

Thanks!

How can I delete this?the easiest way is to cover it up (not the nicest way though) ...
</g>
</g>
<rect x="-10" y="-10" width="20" height="20" fill="white" />
</svg>cheers - hauke

Thank you for your help Hauke!