时间戳

首页 > 解决方案 > 旋转和移动元素

html - 旋转和移动元素

问题描述

我有一个在左上角绘制的元素

然后我用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;
    }

标签： htmlcsssvg

解决方案

您可以使用CSS 动画。

#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 属性。

推荐阅读