Визуализация данных: выборочно анимировать фигуру, но не текст в группе SVG

Question

Я работаю над следующим макетом (используйте Chrome для правильного просмотра), чтобы представить некоторые данные. Я хочу, чтобы svg-сфера "дышала", но каждый svg-текст, связанный с указанной сферой, не будет анимированным.

На данный момент оба: сферы и текст "дышат":

<svg height="100px" width="100px">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" 
r="50%" fx="50%" fy="50%">
  <stop offset="0%" style="stop- 
 color:rgb(0,0,0);stop-opacity:1"/>
  <stop offset="100%" style="stop- 
 color:rgb(255,255,255);stop-opacity:1"/>
 </radialGradient>
 </defs>
 <g>
 <ellipse stroke="rgb(0,{% include 
 indexmod.html %},0)" stroke-opacity="{% 
 include indexmod.html %}" stroke-width="{% 
 include stroke.html %}" cx="50" cy="50" 
 rx="10" ry="10" fill="url(#grad1)"/>
 <text x="50%" y="70%" fill="green" text- 
 anchor="middle">{% include age.html %}</text>
 <text x="50%" y="80%" fill="black" text- 
 anchor="middle">{{page.shortname}}</text>
 </g>
 <animateTransform attributeName="transform" 
 type="scale" additive="sum" from="1 1" to="2 
 2" begin="0s" dur="5s" rotate="auto-reverse" 
 repeatCount="indefinite"></animateTransform>
 <animateTransform attributeName="transform" 
 type="scale" additive="sum" from="2 2" to="1 
 1" begin="5s" dur="5s" 
 repeatCount="indefinite"></animateTransform>
 </svg>