使用变换的 SVG 动画正在偏移元素

Question

我正在尝试通过使用变换旋转在 SVG 中旋转圆形元素来创建光晕效果。我正在使用 getBox 来获取要旋转的元素的中心点。发生旋转时，旋转中心是准确的，整个画面发生偏移，与矩形框不对齐。我尝试了另一个带有螺旋路径的例子。路径对象也正在偏移：

SVG without animation

SVG with animation

如何确保动画不会影响动画元素的位置？

Answer 1

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" onload="init(evt)" >
<script type="text/ecmascript">
var svgNS = "http://www.w3.org/2000/svg";
function init(evt){
  if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument;
  addRotateTransform('spiral', 30, 1);
}
function addRotateTransform(target_id, speed, direction){
  var element_to_rotate = svgDocument.getElementById(target_id);
  var my_transform = svgDocument.createElementNS(svgNS, "animateTransform");
  
  var cx = 315.1676;
  var cy = 387.68182;
  
  my_transform.setAttributeNS(null, "attributeName", "transform");
  my_transform.setAttributeNS(null, "attributeType", "XML");
  my_transform.setAttributeNS(null, "type", "rotate");
  my_transform.setAttributeNS(null, "dur", speed + "s");
  my_transform.setAttributeNS(null, "repeatCount", "indefinite");
  my_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);
  my_transform.setAttributeNS(null, "to", 360*direction+" "+cx+" "+cy);
  
  element_to_rotate.appendChild(my_transform);
  my_transform.beginElement();
}
</script>
<g transform="scale(.5) translate(-100,-180)">
<path id="spiral" style="fill:none;stroke:black"
       d="m 315.1676,387.68182 c 8.40748,6.17899 -4.1812,14.38161 -10.26988,13.97378 -16.49996,-1.10519 -22.18834,-21.15425 -17.67767,-34.51355 8.06853,-23.89666 37.41077,-31.03457 58.75721,-21.38155 31.32677,14.1662 40.10076,53.87255 25.08544,83.00087 -20.01306,38.82347 -70.4052,49.25812 -107.24453,28.78933 -46.35854,-25.75789 -58.46213,-86.97114 -32.49322,-131.48819 31.45184,-53.91612 103.55573,-67.69306 155.73186,-36.19711 61.48776,37.11689 76.94087,120.15192 39.90099,179.97551 -42.764,69.06871 -136.75587,86.19995 -204.21917,43.60489 C 146.08254,465.04658 127.27172,360.08053 175.42985,284.98296 229.456,200.73484 345.4085,180.24337 428.13635,233.9703 c 91.84359,59.64708 114.01657,186.59502 54.71655,276.95016"
       />
</g>
</svg>

在上面的示例中，我已将您的原始 svg 缩小为旋转的螺旋线。为动画脚本取螺旋的中心坐标就可以了。您可能已经注意到，我已将 transform 属性从 <path> 元素中取出，并将其放在围绕螺旋路径的组 (<g>) 中。

将 <script> 标签包含到 SVG 中对我来说是新的，因此读起来很有趣（！），但是你可以也可以不这样做，比如:

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" oonload="init(evt)" >
<g transform="scale(.5) translate(-100,-180)">
<path id="spiral" style="fill:none;stroke:black"
       d="m 315.1676,387.68182 c 8.40748,6.17899 -4.1812,14.38161 -10.26988,13.97378 -16.49996,-1.10519 -22.18834,-21.15425 -17.67767,-34.51355 8.06853,-23.89666 37.41077,-31.03457 58.75721,-21.38155 31.32677,14.1662 40.10076,53.87255 25.08544,83.00087 -20.01306,38.82347 -70.4052,49.25812 -107.24453,28.78933 -46.35854,-25.75789 -58.46213,-86.97114 -32.49322,-131.48819 31.45184,-53.91612 103.55573,-67.69306 155.73186,-36.19711 61.48776,37.11689 76.94087,120.15192 39.90099,179.97551 -42.764,69.06871 -136.75587,86.19995 -204.21917,43.60489 C 146.08254,465.04658 127.27172,360.08053 175.42985,284.98296 229.456,200.73484 345.4085,180.24337 428.13635,233.9703 c 91.84359,59.64708 114.01657,186.59502 54.71655,276.95016">
  <animateTransform attributeName="transform" attributeType="XML" type="rotate" 
   from="0 315.1676 387.68182" to="360 315.1676 387.68182" dur="30s" repeatCount="indefinite"/>
</path>
</g>
</svg>

使用变换的 SVG 动画正在偏移元素

SVG animation using transform is offsetting the element

javascript

svg

svg-animate