Rotate and move the element

Question

I have an element that is drawn in the upper left corner

Then I use translate to set the top left corner in the middle of the element

Next, I would like the element to rotate here and then move it by x and y (this is not because it first moves and then rotates relative to a predetermined point. This point is at the beginning of the picture so this rotation has no sense)

How to make the element rotate first and then move?

String with the code that generates the element:

    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;
    }

Possible duplicate of [Rotate rectangle around its own center in SVG](https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-center-in-svg) — computercarguy, Oct 29 '19 at 23:06
if this is a C# snippet, you should use an interpolated string. — aloisdg, Oct 29 '19 at 23:06

score 0 · Answer 1 · answered Oct 29 '19 at 23:22

You can use 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);}
}

This is just an example, you can set any animatable CSS properties at any percentages in the keyframes.

Rotate and move the element

1 Answers1