admin管理员组

文章数量:1336311

I am trying to rotate the image about its center. But in Safari, the top left corner of the SVG, it's origin is always taken as the center for rotation.

       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>

/

I am trying to rotate the image about its center. But in Safari, the top left corner of the SVG, it's origin is always taken as the center for rotation.

       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>

https://jsfiddle/ztw2omgb/

  • javascript
  • html
  • d3.js
  • svg
  • safari
Share Improve this question edited Aug 30, 2019 at 19:13 lijo asked Aug 30, 2019 at 19:07 lijolijo 331 silver badge7 bronze badges 1
  • Here is the code jsfiddle/ztw2omgb – lijo Commented Aug 30, 2019 at 19:13
Add a ment  | 

1 Answer 1

Reset to default 10

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 pletely, 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);
    });

}

本文标签： javascriptCSS transformorigin not working for svg in safariStack Overflow

版权声明：本文标题：javascript - CSS transform-origin not working for svg in safari - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742324412a2453435.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。