旋转并移动图元

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动画。

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