Question

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

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

Answer 1

＆＃13;

<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>

＆＃13;

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

将<script> - 标签包含到SVG中对我来说是新的，因此这是一个有趣的读取（！），但也可以在没有这样做的情况下执行此操作，例如：

＆＃13;

<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>

＆＃13;

使用变换的SVG动画抵消了元素

1 个答案: