缩放和镜像SVG对象

Question

我如何最容易地首先缩放一个对象,比如当前大小的2倍,然后垂直和水平翻转,或两者兼而有之？

到目前为止,我可以将"scale(2,2)"设置为它的宽度和高度的2倍,但是我不能将其翻转为与垂直翻转的比例(-1,1)相同.

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

Answer 1

要同时应用缩放和翻转,只需在变换中列出两者.

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

或者简单地组合这些值

transform="scale(-2,2)"

当然,您使用负标度的问题是对象在SVG的原点(左上角)翻转,因此它们可以离开文档的边缘.您还需要通过添加翻译来纠正此问题.

因此,例如,假设我们有一个100x100的文档.

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

并且为了校正屏幕外的移动,我们要么在翻转之前将其移动为负(因此它会在屏幕上翻转):

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

(此处列出的是翻译,因为变换列表从右到左有效应用)

或者我们可以在之后将其转换为正数(按比例缩放):

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

这是一个演示垂直翻转,水平翻转和两个翻转的演示

更新

翻转(就位)屏幕上某处的现有对象.首先确定它的边界框(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)" />

在这里演示

Answer 2

只需将以下属性添加到 svg 中的路径标记中

transform="scale (-1, 1)" transform-origin="center"

例如： <path transform="scale (-1, 1)" transform-origin="center" ......./>

Answer 3

来认识一下企鹅“Tux”。为了这个练习，我在他的脚上画了字母“L”和“R”。

首先，让我们在画布中央绘制燕尾服。如果画布的大小为500x500，并且如果 Tux 的大小为 ，100x100我们必须将他放置在(200,200)。（即中心减去其大小的一半。）

  <svg width="500" height="500">
    <!-- marking our border and a cross through the center -->
    <rect x="0" y="0" width="500" height="500" stroke-width="2" stroke="red" fill="none"></rect>
    <line x1="0" y1="0" x2="500" y2="500" stroke="red" stroke-width="2"></line>
    <line x1="500" y1="0" x2="0" y2="500" stroke="red" stroke-width="2"></line>

    <!-- our pinguin in the center -->
    <image x="200" y="200" width="100" height="100" href="assets/pinguin.png"></image>
  </svg>

现在，如果我们想水平镜像我们的企鹅（左右切换），很容易只使用带有 的变换scale(-1 1)。然而，当我们尝试这样做时，我们的企鹅就消失了。

  <svg width="500" height="500">
    ...
    <image ... transform="scale(-1 1)"></image>
  </svg>

原因是，我们变换的默认反射点（所谓的“变换原点”）并不位于图像的中心，但实际上仍在该点(0,0)。

最明显的解决方案是将反射点移动到图像的中心点(250,250)。（在本例中，是画布的中心）。

  <svg width="500" height="500">
    ...
    <image ... transform="scale(-1 1)" transform-origin="250 250"></image>
  </svg>

调整大小的工作原理完全相同。您可以按 2 个比例进行操作，也可以将它们组合成 1 个比例。

  <svg width="500" height="500">
    <!-- use 2 scales -->
    <image x="200" y="200" width="100" height="100" href="assets/pinguin.png"
           transform="scale(-1 1) scale(2 2)" transform-origin="250 250">
    </image>    
    <!-- or just multiply the values of both scales -->
    <image x="200" y="200" width="100" height="100" href="assets/pinguin.png"
           transform="scale(-2 2)" transform-origin="250 250">
    </image>
  </svg>