Html 数据可视化：在svg组中有选择地设置形状动画，但不设置文本动画

我正在研究以下内容（使用Chrome来正确查看）来表示一些数据。我想要一个svg球体将“呼吸”，但连接到所述球体的每个svg文本将不会被设置动画

目前，球体和文本都是“呼吸”：

{%include age.html%}
{{page.shortname}

然后将动画应用到椭圆而不是组。问题是如何将动画应用到椭圆，但保持在相同的布局中-我应该使用标记吗？或者使用更多标记？为attributeTransform元素指定一个指向ellipse元素的xlink:href属性。因此，您需要为ellipse元素提供一个id。它有帮助，但不正确。我给了椭圆id=“breath”，并用xlink:href=“#breath”指向它——之后，动画以不同的风格工作，并且仅对于第一个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>