缩放并镜像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)"

或者简单地组合值:

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>

要垂直翻转，请执行以下操作:

To flip this vertically, you do:

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

因此最终对象变为:

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