缩放和镜像 SVG 对象 [英] Scale and mirror SVG object

问题描述

我如何最轻松地首先缩放对象，比如当前大小的 2 * 倍，然后垂直和水平翻转它，或两者兼而有之?

How do I most easily first scale an object, say 2 * times it's current size and then flip it vertically and horizontally, or both?

截至目前，我可以将scale(2,2)"设置为宽度和高度的 2 倍，但我不能用 scale(-1, 1) 同时翻转它用于垂直翻转.

As of now, I can either set "scale(2,2)" for it to become 2 times as big as it's width and height but I can't flip it at the same with scale(-1, 1) for vertical flip.

我正在以编程方式创建 SVG 对象，作为导出格式.

I'm creating SVG objects programmatically, as a format to export to.

推荐答案

要同时应用缩放和翻转，只需在转换中列出:

To apply both scale and flip, just list both in your transform:

transform="scale(2,2) scale(-1,1)"

或者简单地组合这些值:

Or simply combine the values:

transform="scale(-2,2)"

当然，负比例的问题是对象在 SVG 的原点(左上角)上翻转，因此它们可以脱离文档的边缘.您还需要通过添加翻译来更正此问题.

Of course, the issue you have with negative scales is that the objects get flipped across the origin (top left) of the SVG, so they can go off the edge of the document. You need to correct this by adding a translate as well.

例如，假设我们有一个 100×100 的文档.

So, for example, imagine we had a document that is 100×100.

<svg width="100" height="100">
    <polygon points="100,0,100,100,0,100"/>
</svg>

要垂直翻转，您可以:

<polygon points="100,0,100,100,0,100" transform="scale(2,-2)"/>

要纠正屏幕外的移动，您可以...

And to correct the movement off-screen, you can either...

(选项 1)在翻转前将其向负移动(因此它会在屏幕上翻转回来):

(option 1) Shift it negative before the flip (so it gets flipped back on screen):

<polygon points="100,0,100,100,0,100" transform="scale(2,-2) translate(0,-100)"/>

(翻译在此处列在第二位，因为转换列表有效地从右到左应用)

(The translate is listed second here because transform lists are effectively applied right to left)

(选项 2)或者，您可以在之后将其正向移动(按缩放大小):

(option 2) Or, you can shift it positive (by the scaled size) afterwards:

<polygon points="100,0,100,100,0,100" transform="translate(0,200) scale(-2,2)"/>

这是一个演示，展示了垂直翻转、水平翻转和双翻转

更新

翻转(在适当位置)屏幕上某处已经存在的对象.首先确定它的边界框 (minX, minY, maxX, maxY)，或者 centreX,centreY(如果你已经知道).

To flip (in position) an already existing object that is somewhere on screen. First determine its bounding box (minX, minY, maxX, maxY), or centreX,centreY if you already know that instead.

然后在其转换前添加以下内容:

Then prepend the following to its transform:

translate(<minX+maxX>,0) scale(-1, 1)   // for flip X
translate(0,<minY+maxY>) scale(1, -1)   // for flip Y

或者如果你有中心，你可以使用

or if you have the centre you can use

translate(<2 * centreX>,0) scale(-1, 1)   // for flip X

所以在你的例子中:

<rect x="75" y="75" width="50" height="50"  transform="translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

minX+maxX 等于 200.所以要水平翻转，我们要添加:

The minX+maxX comes to 200. So to flip horizontally, we prepend:

translate(200,0) scale(-1, 1)

所以最终的对象变成了:

So the final object becomes:

<rect x="75" y="75" width="50" height="50"  transform="translate(200,0) scale(-1, 1) translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

此处演示

这篇关于缩放和镜像 SVG 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！