How do I rotate and skew an SVG rect “in-place”?

问题

I am playing with SVG and I am stumped by something. I am trying to make the pink square into a diamond by using skew and rotate. However I am getting strange behaviour that I cannot figure out how to overcome.

Adding the skew, gets me the diamond effect I want, but then I need to rotate and reposition it so it lines up with the circles.

<rect x="126" y="0" width="40" height="40"fill="pink" transform="skewY(10)" />

However, when I apply rotation transform="rotate(45)" to the rect, it doesn't rotate "in-place", but rotates [I think] relative from the corner of the page.

<rect x="126" y="0" width="40" height="40"fill="pink" transform="skewY(10)" />

Does anyone know how I can freely rotate and skew this rectangle (in SVG and not CSS or anything) without it moving around so wildly and awkwardly ?

    <h1>Shapes</h1>
    <svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="20" fill="blue" stroke="red" ></circle>
    <circle cx="62" cy="20" r="20" fill="yellow" stroke="red" ></circle>
    <circle cx="104" cy="20" r="20" fill="blue" stroke="red" ></circle>
    <rect x="126" y="0" width="40" height="40"fill="pink"/>
    <circle cx="188" cy="20" r="20" fill="green" stroke="red" ></circle>
    </svg>

回答1:

Simplest is to use transform-origin and transform-box

rect {
  transform-origin: center;
  transform-box: fill-box;
}

<h1>Shapes</h1>
    <svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="20" fill="blue" stroke="red" ></circle>
    <circle cx="62" cy="20" r="20" fill="yellow" stroke="red" ></circle>
    <circle cx="104" cy="20" r="20" fill="blue" stroke="red" ></circle>
    <rect transform="rotate(45)" x="126" y="0" width="40" height="40"fill="pink"/>
    <circle cx="188" cy="20" r="20" fill="green" stroke="red" ></circle>
    </svg>

回答2:

 <h1>Shapes</h1>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <circle cx="21" cy="21" r="20" fill="blue" stroke="red"></circle>
   <circle cx="63" cy="21" r="20" fill="yellow" stroke="red"></circle>
   <circle cx="105" cy="21" r="20" fill="blue" stroke="red"></circle>
   <rect x="154" y="0" width="40" height="40" fill="pink" transform="rotate(45, 154, 0)"/>
   <circle cx="203" cy="21" r="20" fill="green" stroke="red"></circle>
 </svg>

This can be done using rotate. For rotate

First argument is the angle of rotation i.e. 45 degrees.
Second argument is the x offset about which the rect is to be rotated and is calculated as follows:

x = (border_width_of_circle_1 * 2 + radius_of_circle_1 * 2) + (border_width_of_circle_2 * 2 + radius_of_circle_2 * 2) + (border_width_of_circle_3 * 2 + radius_of_circle_3 * 2) + 1/2 * diagonal_of_square
  = (2 + 40) + (2 + 40) + (2 + 40) + (1/2 * sqrt(40^2 + 40^2))
  = 42 + 42 + 42 + (1/2 * sqrt(3200))
  = (42 * 3) + (1/2 * 56)
  = 126 + 28 = 154

Third argument is the y offset about which the rect is to be rotated, which in our case will be 0.

来源：https://stackoverflow.com/questions/62671605/how-do-i-rotate-and-skew-an-svg-rect-in-place

标签

javascript

html

svg