关于javascript：使用transform的SVG动画会偏移元素


SVG animation using transform is offsetting the element

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

没有动画的SVG

带有动画的SVG

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

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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();
}

<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属性，并将其放置在围绕螺旋路径的组()中。

-tag包含在SVG中对我来说是新的，因此是一个有趣的read(！)，但您也可以不这样做，例如：

1
2
3
4
5
6
7
8
9
<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>