时间戳

首页 > 解决方案 > 如何“就地”旋转和倾斜 SVG 矩形？

javascript - 如何“就地”旋转和倾斜 SVG 矩形？

问题描述

我正在玩 SVG，但我被一些东西难住了。我正在尝试使用skewand将粉色方块变成钻石rotate。但是，我遇到了奇怪的行为，我无法弄清楚如何克服。

svg 圈子

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

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

歪斜的

但是，当我对 应用旋转transform="rotate(45)"时rect，它不会“就地”旋转，而是相对于页面的角落旋转[我认为]。

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

圆形 svg 旋转

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

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

标签： javascripthtmlsvg

解决方案

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

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>

推荐阅读