CSS 变换原点不适用于 safari 中的 svg

Question

CSS 变换原点不适用于 safari 中的 svg

lij*_*ijo 2 html javascript safari svg d3.js

我正在尝试围绕其中心旋转图像。但是在 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>

Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/ztw2omgb/

Answer 1

lem*_*ing 7

按照MDN文档的变换出身，地位transform-origin的SVG是兼容性未知。所以它可能还没有在 Safari 中实现。

但是，如果您transform-origin完全删除属性，则可以使用rotate()函数的第二个和第三个参数来定义所选元素的旋转中心。例如

您的图像的x, andy值分别为325和150，宽度和高度均为 100。因此旋转中心应该是x和y值加上宽度和高度的一半（50），给出375和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);
    });

}

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，6 月前
查看次数：	1492 次
最近记录：	6 年，6 月前