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