旋转和移动元素答案

【问题标题】：Rotate and move the element旋转和移动元素
【发布时间】：2019-10-30 07:22:42
【问题描述】：

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

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

【问题讨论】：

Rotate rectangle around its own center in SVG的可能重复
如果这是一个 C# sn-p，你应该使用一个内插字符串。

标签： html css svg

【解决方案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 属性。

【讨论】：