Question

我在转换SVG时遇到一些问题。我想做的是旋转矩形比例尺并同时移动。到目前为止，我还没有找到一种方法来实现此目的。

情况如下：

我有一个用HTML定义的矩形，因此它绕其中心旋转：

<rect class="rotate_rect" id="right_left_polyg" x="50" y="35" width="12" height="12" style="fill:#4A4A4A;stroke:#4A4A4A;stroke-width:2" transform="rotate(45,56,41)"/>

我将Velocity.js用作动画库，但问题更多是一般性的。问题是，当我尝试将矩形向右移动时，它会向右向下移动。这是因为我要更改的x值也包含在rotate函数中。

我也尝试了以下方法，但这并没有达到我的期望。

.rotate_rect{
    transform: rotate(45deg);
    transform-origin: center;
}

有没有一种方法可以定义旋转函数而无需指定x值？

为了使其易于复制，这是我的矩形。.我已经如上定义了类。

<rect class="rotate_rect" id="right_left_polyg" x="50" y="35" width="12" height="12" style="fill:#4A4A4A;stroke:#4A4A4A;stroke-width:2"/>

有没有一种方法可以使矩形围绕其中心轴旋转并且x值不包含在旋转函数中？

Answer 1

构建矩形，使其中心位于0, 0处，并在旋转之前使用translate()移动矩形。（由于变换语义从最里面到最外面应用了操作，因此在旋转之后，技术上将旋转。）

例如：

<rect x="-6" y="-6" width="12" height="12" transform="translate(56,41) rotate(45)" class="rotate_rect" id="right_left_polyg" style="fill:#4A4A4A;stroke:#4A4A4A;stroke-width:2" />

或者：

<g transform="translate(56,41)">
  <rect x="-6" y="-6" width="12" height="12" transform="rotate(45)" class="rotate_rect" id="right_left_polyg" style="fill:#4A4A4A;stroke:#4A4A4A;stroke-width:2" />
</g>

SVG变换属性

1 个答案: