数据可视化：选择性地对形状进行动画处理，而不对svg组中的文本进行动画处理

Question

我正在研究以下layout（使用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>