In SVG, when the animation is paused and the animation function value is to-animation, the transform attribute in the target element has no effect.

• Component: SVG
• Status: NEW ---

[Said Abou-Hallawa]

Created attachment 242437 [details]
Test running only a part of animateTransform while the animation is paused

Open this svg in WebKit

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- to animation -->
  <g transform="translate(50 250)">
    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
    transform="rotate(45)">
      <animateTransform attributeName="transform"
        type="rotate" to="135" dur="2s" fill="freeze"/>
    </path>
  </g>
  <!-- by animation -->
  <g transform="translate(150 250)">
    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
    transform="rotate(45)">
      <animateTransform attributeName="transform"
        type="rotate" by="90" dur="2s" fill="freeze"/>
    </path>
  </g>
  <script>
    document.documentElement.pauseAnimations();
  </script>
</svg>

Result: The first arrow is upwards arrow and the second arrow is North-East arrow
Expected: Both arrows should be North-East arrows

Or open the attached svg and compare it with the expected results. They should be identical.

[Said Abou-Hallawa]

Created attachment 242438 [details]
Expected file

[Radar WebKit Bug Importer]

<rdar://problem/19118011>

[Ahmad Saleem]

I am able to reproduce this bug in Safari 16.2 & Safari Technology Preview 161 using attached test case while other Chrome Canary 111 and Firefox Nightly 111 match each other and work similar to Expected File. Thanks!