How do I get a style property value from an SVG element that is animated using transform?-CodePudding

If I have an SVG element that is animated using transform, either using SMIL or CSS, how do I get the computed style of the property that is animated?

Here I have a <rect> that rotates, but as you can see the rotate property just returns none:

var rect1 = document.getElementById('rect1');

setTimeout(function(){
  let rectStyle = getComputedStyle(rect1);
  console.log(rectStyle.rotate);
}, 200);

<svg id="svg" width="200" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect1" x="1" y="1" width="2" height="2" fill="red">
    <animateTransform attributeName="transform"
      attributeType="XML" type="rotate"
      values="0 2 2; 360 2 2" dur="10s"
      repeatCount="indefinite"/>
  </rect>
</svg>

var rect1 = document.getElementById('rect1');

setTimeout(function(){
  let rectStyle = getComputedStyle(rect1);
  console.log(rectStyle.rotate);
}, 200);

#rect1 {
  transform-origin: center;
  animation-name: rotate;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<svg id="svg" width="200" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect1" x="1" y="1" width="2" height="2" fill="red" />
</svg>

CodePudding user response：

In the case of a SMIL animation just read off the SMIL values if you want to.

var rect1 = document.getElementById('rect1');

setTimeout(function(){
  let a = rect1.transform.animVal[0].matrix.a;
  let b = rect1.transform.animVal[0].matrix.b;
  let angle = Math.atan2(b, a) * (180/Math.PI);
  console.log(angle);
}, 200);

<svg id="svg" width="200" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect1" x="1" y="1" width="2" height="2" fill="red">
    <animateTransform attributeName="transform"
      attributeType="XML" type="rotate"
      values="0 2 2; 360 2 2" dur="10s"
      repeatCount="indefinite"/>
  </rect>
</svg>

CodePudding user response：

In the case of a CSS animation you can use transform instead of rotate but you get something like matrix(....). to get the exact value you need similar to this article .

var rect1 = document.getElementById('rect1');

setTimeout(function(){
  let rectStyle = getComputedStyle(rect1);
  let values = rectStyle.transform.split('(')[1];
  values = values.split(')')[0];
  values = values.split(',');
  let a = values[0];
  let b = values[1];
  let c = values[2];
  let d = values[3];
  
  var angle = Math.atan2(b, a) * (180/Math.PI);
  console.log(angle);
}, 200);

#rect1 {
  transform-origin: center;
  animation-name: rotate;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<svg id="svg" width="200" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect1" x="1" y="1" width="2" height="2" fill="red" />
</svg>