Question

这个问题很好地告诉我，SVG不支持CSS的transform3d：3d transforms on SVG element

但答复中的评论者建议，可以使用SVG原生rotate()和scale()转换的组合来模拟效果。

这是我的演示SVG：

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="50" cy="50" r="40" stroke="red" fill="grey" />
  <circle id="circle2" cx="150" cy="50" r="4" stroke="red" fill="grey" />
</svg>

是否可以通过修改SVG transform3d(1.05, 1.05, 1.05)元素上的#circle1属性来模拟将CSS transform应用于circle的效果？ x,y,z的{{1}}与旋转和缩放组合的5个参数之间的数学关系是什么？还是不可行？

Answer 1

转换功能现在可以像在CSS中那样工作，但是参考资料指出了两者之间的语法差异，并且可能存在问题，即无法保证。将鼠标悬停在该代码块上，以查看此代码段中的rotate3d示例：

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 10;
    }
        
    @keyframes transform {
        from {transform:perspective(800px) rotate3d(1,0,0,-95deg)}
        to {transform:perspective(800px) rotate3d(1,0,0, 0deg)}
    }
        
    #thing:active {
            animation: transform .8s steps(100) both;
            transform-origin: 0% 90%;
    }

    <html>
    <head>
       <link href="seat2.css" rel="stylesheet" />
    </head>
    
    <svg id="thing" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" viewBox="0 0 150 150">
        <rect width="100" height="100"/>
    </svg>
    </html>

SVG转换中的transform3d等效项

1 个答案: