Флип svg система координат
Есть ли способ перевернуть систему координат SVG так, чтобы [0,0] находилось в левом нижнем углу вместо верхнего левого?
9 ответов
Я провел много экспериментов, и единственный логический метод заключается в следующем:
<g transform="translate(0,400)">
<g transform="scale(1,-1)">
Где 400 - высота изображения. Что это делает, он перемещает все вниз так, чтобы верхняя часть изображения была теперь, а нижняя часть изображения, затем операция масштабирования переворачивает координаты Y, так что бит, который теперь находится вне страницы / изображения, переворачивается вверх, чтобы заполнить пространство осталось позади.
Лучшая комбинация, которую я нашел для преобразования в декартову систему координат, довольно проста:
CSS
svg.cartesian {
display:flex;
}
svg.cartesian > g {
transform: scaleY(-1);
}
svg.cartesian > g text {
transform: scaleY(-1);
}
<html>
<head></head>
<body>
<svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
<g>
<path d="M0 -100 V 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M-100 0 H 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
<g transform="translate(20, 20)">
<circle r="1" />
<text>(20, 20)</text>
</g>
<g transform="translate(-50, -35)">
<circle r="0.5" />
<text>(-50, -35)</text>
</g>
</g>
</svg>
</body>
</html>
Это автоматически отключит все текстовые элементы на странице через CSS scaleY(-1)
,
Я знаю, что это старо, но я делал то же самое, пробовал версию @Nippysaurus, но это слишком раздражает, так как все будет вращаться (поэтому, если вы поместите изображения, вам придется повернуть их обратно). Есть и другое решение, хотя
Что я сделал, так это просто переместил окно просмотра svg
и инвертируем все координаты на оси y (и удаляем высоту объекта, который должен быть в нижнем левом углу на нем тоже), например:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="300" viewBox="0 -300 200 300">
<rect x="20" y="-40" width="20" height="20" stroke="black" stroke-width="1px"></rect>
</svg>
это положит rect
в 20,20 от нижнего левого угла svg
см. http://jsfiddle.net/DUVGz/
Если вы не знаете размер svg, вы можете использовать CSS-преобразования для всего элемента SVG:
#parrot {
transform-origin: 50% 50%; /* center of rotation is set to the center of the element */
transform: scale(1,-1);
}
Да, поворот координаты -90 с последующим переводом + высота вашей новой фигуры должен сделать это. Есть пример на W3C.
<g transform="translate(0,400) scale(1,-1)">
что также эквивалентно ниже
<g transform="scale(1,-1) translate(0,-400) ">
Альтернативой является использование D3 v4 scaleLinear для создания функции, которая заменит вас.
import * as d3 from "d3";
...
// Set the height to the actual value to where you want to shift the coords.
// Most likely based on the size of the element it is contained within
let height = 1;
let y = d3.scaleLinear()
.domain([0,1])
.range([height,0]);
console.log("0 = " + y(0)); // = 1
console.log("0.5 = " + y(0.5)); // = 0.5
console.log("1 = " + y(1)); // = 0
console.log("100 = " + y(100)); // = -99
console.log("-100 = " + y(-100)); // = 101
Смотрите исполняемый код через тоник
Что я обычно делал, так это рисовал / помещал координату в отрицательное значение оси Y на декартовой плоскости. Позже перенесите координату, заменив отрицательное значение оси Y на положительное значение.
Я думаю, что самый простой способ повернуть элемент на 180 градусов - это повернуть на 180,1 градуса;
преобразование ="переводить (180.1,0,0)"