Масштаб и зеркальный объект SVG

Ответ 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)" />

Демо здесь

Ответ 2

Вот фрагмент кода Livescript-ish, как вы можете перевернуть и масштабировать по горизонтали в зависимости от любого фактора:

    # scale is 1 by default

    if mirror or scale isnt 1
        [minx, miny, width, height] = svg.attributes.viewBox |> split-by ',' |> cast-each-as (Number)

        s = scale
        # container is the root 'g' node 
        container.attributes.transform = if mirror
            "translate(#{s * (width + minx) + minx}, #{-miny * (s-1)}) scale(#{-s},#{s})"
        else
            "translate(#{-minx * (s-1)}, #{-miny * (s-1)}) scale(#{s},#{s})"

        if scale isnt 1
            svg.attributes
                ..viewBox = "#{minx},#{miny},#{width * scale},#{height * scale}"
                ..width = "#{width * scale}"
                ..height = "#{height * scale}"

Ответ 3

Перевернуть всю SVG, ниже будет работать

 transform="scale(-1,1) translate(-1,0)"

Поместите это в тег SVG