Javascript CSS转换源不适用于safari中的svg_Javascript_Html_D3.js_Svg_Safari

Javascript CSS转换源不适用于safari中的svg

javascript html d3.js svg safari

Javascript CSS转换源不适用于safari中的svg,javascript,html,d3.js,svg,safari,Javascript,Html,D3.js,Svg,Safari,我试图围绕图像中心旋转图像。但在Safari（SVG的左上角）中，它的原点始终作为旋转的中心 var rotate_val= 30; function rotate(val){ rotate_val = rotate_val + val; var transform = "translate(0, 0) scale(1, 1) rotate("+rotate_val+ ")"; var svg =

我试图围绕图像中心旋转图像。但在Safari（SVG的左上角）中，它的原点始终作为旋转的中心

       var rotate_val= 30;
       function rotate(val){
           rotate_val =  rotate_val + val;
           var transform = "translate(0, 0) scale(1, 1) rotate("+rotate_val+ ")";

           var svg = d3.select("g").transition()
            .style('-webkit-transform-origin', '50% 50%')
            .style('transform-origin', 'center')
            .duration(1200)
            .attrTween("transform",function(interpolate) {
                return d3.interpolate(transform, transform);
            });

       }



  <body>
      <button onclick="rotate(30)">Rotate + 30</button>
      <button onclick="rotate(-30)">Rotate - 30</button>
      <div id = "svgcontainer" style="border: 1px solid">
         <svg width = "100%" height = "100%" viewBox="0 0 750 400">
             <g>
                 <image x="325" y="150" xlink:href="image.png" height="100" width="100"/>
            </g>
         </svg>
      </div>
   </body>

var rotate\u val=30；
函数旋转（val）{
rotate_val=rotate_val+val；
var transform=“平移（0，0）比例（1，1）旋转（“+rotate_val+”）”；
var svg=d3.select（“g”）.transition（）
.style（“-webkit转换原点”，“50%50%”）
.style（'transform-origin'、'center'）
.持续时间（1200）
.attrTween（“变换”，函数（插值）{
返回d3.插值（变换，变换）；
});
}
旋转+30
轮换-30

根据，SVG的

转换原点的状态未知。因此，它可能还没有在Safari中实现
但是，如果完全删除变换原点
属性，则可以使用rotate（）
函数的第二个和第三个参数来定义所选元素的旋转中心。e、 g
图像的x
和y
值分别为325和150，宽度和高度均为100。因此，旋转中心应为x
和y
值加上宽度和高度（50）的一半，即375和200
这是他们实际支持的代码。。。用于通过CSS应用的转换。。
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);
    });

}