Question

我在左上角绘制了一个元素

然后我用translate设置元素中间的左上角

下一步，我希望元素在此处旋转，然后将其移动x和y （这不是因为它先移动然后相对于预定点旋转。该点位于图片的开头，所以这种旋转没有意义）

如何使元素先旋转然后移动？

带有生成元素的代码的字符串：

    public string Connector(double x, double y, int no)
    {
        string s = "<g transform=\"translate(-5.5 -80) rotate(-90 5.5 80)\">" +
            "<svg x=\"" + x + "\" y=\"" + (y - 20) + "\" style=\"width:100%;height:100%;max-height:100%;\">" +
            "<rect x=\"3\" y=\"78\" width=\"1\" height=\"10\" class=\"recStyle\" />" +
            "<rect x=\"7\" y=\"78\" width=\"1\" height=\"10\" class=\"recStyle\" />" +
            "<image x=\"0\" y=\"91\" width=\"11\" height=\"9\" xlink:href=\"batting.png\">" +
            "</image><rect x=\"0\" y=\"91\" width=\"11\" height=\"9\" class=\"recStyle\" />" +
            "<rect x=\"3\" y=\"103\" width=\"1\" height=\"68\" class=\"recStyle\" />" +
            "<rect x=\"7\" y=\"103\" width=\"1\" height=\"68\" class=\"recStyle\" />" +
            "<rect x=\"4\" y=\"81\" width=\"3\" height=\"30\" class=\"recStyle\" />" +
            "<rect x=\"1.5\" y=\"80\" width=\"8\" height=\"1\" class=\"recStyle\" />" +
            "<text x=\"5.5\" y=\"181\" text-anchor=\"middle\" font-weight=\"bold\" font-family=\"Arial\" font-size=\"10\">" + no + "</text>" +
            "</svg>" +
            "</g>";

        return s;
    }

Answer 1

您可以使用CSS animations。

#myDiv {
  animation-name: myAnimation;
  animation-duration: 2s;
}

@keyframes myAnimation {
  0%   {transform: rotate(0) translate(0, 0);}
  50%  {transform: rotate(90deg) translate(0, 0);}
  100% {transform: rotate(0) translate(50px, 50px);}
}

这只是一个示例，您可以在关键帧中以任何百分比设置任何可设置动画的CSS属性。

旋转和移动元素

1 个答案: