[Solved]-CSS transform-origin not working for svg in safari-d3.js

According to the MDN docs for transform-origin, the status of transform-origin for SVG is Compatibility Unknown. So it may not be implemented yet in Safari.

However, if you remove the transform-origin attributes completely, you can use the second and third arguments of the rotate() function to define the center of rotation for your selected element. e.g.

Your image's x, and y values are 325 and 150 respectively, and the width and height are both 100. So the center of rotation should be the x and y values plus half the width and height (50) giving 375 and 200.

function rotate(val){
  rotate_val =  rotate_val + val;

  // note the rotate function now contains second and third argument,
  // which specify the center of rotation.
  var transform = "translate(0, 0) scale(1, 1) rotate("+rotate_val+ ", 375, 200)";

  d3.select("g").transition()
    .duration(1200)
    .attrTween("transform",function(interpolate) {
       return d3.interpolate(transform, transform);
    });

}