如何“就地"旋转和倾斜 SVG 矩形? [英] How do I rotate and skew an SVG rect "in-place"?

问题描述

我正在玩 SVG，但我被某些东西难住了.我试图通过使用 skew 和 rotate 将粉红色方块变成菱形.但是，我有一些奇怪的行为，我不知道如何克服.

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.

添加skew，得到我想要的菱形效果，但随后我需要旋转并重新定位它，使其与圆圈对齐.

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.

但是，当我将旋转 transform="rotate(45)" 应用于 rect 时，它不会就地"旋转，但是[我认为]从页面角相对旋转.

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.

有谁知道我可以如何自由地旋转和倾斜这个矩形(在 SVG 中而不是 CSS 或任何东西中)而不会如此疯狂和笨拙地移动?

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>

推荐答案

最简单的就是使用transform-origin和transform-b​​ox

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>

这篇关于如何“就地"旋转和倾斜 SVG 矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！