svg - 缩放和镜像 SVG 对象

Question

如何最轻松地首先缩放对象，例如当前大小的 2 * 倍，然后垂直和水平翻转，或两者都翻转？

到目前为止，我可以设置“scale(2,2)”，使其变为宽度和高度的 2 倍，但我无法与scale(-1, 1) 同时翻转它用于垂直翻转。

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

Answer 1

要同时应用缩放和翻转，只需在变换中列出两者即可:

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

或者简单地组合这些值:

transform="scale(-2,2)"

当然，负比例的问题是对象会翻转到 SVG 的原点(左上角)，因此它们可能会超出文档的边缘。您还需要通过添加翻译来纠正此问题。

例如，假设我们有一个 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)"/>

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

(选项 1)在翻转之前将其移至负值(这样它会在屏幕上翻转回来):

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

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

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

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

Here is a demo showing vertical flip, horizontal flip and both flips

更新

翻转(就位)屏幕上某处已存在的对象。首先确定其边界框(minX, minY, maxX, maxY)，或者centreX,centreY(如果您已经知道的话)。

然后将以下内容添加到其转换中:

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

或者如果您有可以使用的中心

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。因此，为了水平翻转，我们在前面添加:

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

Demo here