Флип 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);
}

Кредиты: https://sarasoueidan.com/blog/svg-transformations/

Источник

Да, поворот координаты -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)"

Источник
Другие вопросы по тегам