Как наиболее легко сначала масштабировать объект, скажем, 2 раза по сравнению с текущим размером, а затем перевернуть его по вертикали и по горизонтали или по обеим?
В настоящее время я могу либо установить "масштаб (2,2)", чтобы он стал в 2 раза большим, чем его ширина и высота, но я не могу перевернуть его по шкале (-1, 1) для вертикального флип.
Я создаю объекты SVG программно, как формат для экспорта.
Чтобы применить как масштаб, так и флип, просто перечислите оба в своем преобразовании.
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)" />
Вот фрагмент кода 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}"
Перевернуть всю SVG, ниже будет работать
transform="scale(-1,1) translate(-1,0)"
Поместите это в тег SVG