Sistema de coordenadas SVG FLIP
-
27-09-2019 - |
Pergunta
Existe uma maneira de virar o sistema de coordenadas SVG para que [0,0] esteja no canto inferior esquerdo, em vez do canto superior esquerdo?
Solução
Eu fiz muita experimentação, e o único método lógico é o seguinte:
<g transform="translate(0,400)">
<g transform="scale(1,-1)">
Onde 400 é a altura da imagem. O que faz isso move tudo para baixo para que a parte superior da imagem seja agora e a parte inferior da imagem, então a operação em escala vira as coordenadas y, para que a parte que agora esteja fora da página/imagem seja invertida para encher para preencher O espaço deixado para trás.
Outras dicas
O melhor combinação que encontrei para transformar em um sistema de coordenadas cartesianas é bem simples:
CSS
svg.cartesian {
display:flex;
}
/* Flip the vertical axis in <g> to emulate cartesian. */
svg.cartesian > g {
transform: scaleY(-1);
}
/* Re-flip all <text> element descendants to their original side up. */
svg.cartesian > g text {
transform: scaleY(-1);
}
<html>
<head></head>
<body>
<svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
<g>
<!-- SVG Start -->
<!-- Vertical / Horizontal Axis: Can be removed if you don't want x/y axes. -->
<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" />
<!-- Plotting: This is an example plotting two points at (20, 20) and (-50, -35), replace it with your data. -->
<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>
<!-- SVG End -->
</g>
</svg>
</body>
</html>
Isso irá se unir automaticamente todos os elementos de texto na página via CSS scaleY(-1)
.
Eu sei que isso é antigo, mas eu estava fazendo a mesma coisa, tentei a versão @nippysaurus, mas isso é muito irritante, pois tudo será girado (por isso, se você colocar imagens, precisará girá -las de volta). Há outra solução embora
O que eu fiz foi simplesmente mover a caixa de vista do svg
e inverta todas as coordenadas no eixo y (e removendo a altura do objeto para estar no canto inferior esquerdo também), como:
<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>
Isso vai colocar um rect
a 20.20 do canto inferior esquerdo do svg
, Vejo http://jsfiddle.net/duvgz/
Sim, uma rotação de coordenadas de -90 seguida de uma tradução de + a altura da sua nova figura deve fazê -lo. Há um exemplo em W3C.
<g transform="translate(0,400) scale(1,-1)">
que também equivalente a abaixo
<g transform="scale(1,-1) translate(0,-400) ">
Se você não sabe o tamanho do SVG, você pode usar as transformações CSS para todo o elemento SVG:
#parrot {
transform-origin: 50% 50%; /* center of rotation is set to the center of the element */
transform: scale(1,-1);
}
Créditos:https://sarasoueidan.com/blog/svg-transformations/#transforming-svgs-with-css
Uma alternativa é usar D3 V4 Scalelinear Para criar uma função que fará a troca para você.
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
Eu acho que a maneira mais simples de girar o elemento por 180 graus é que você gira por 180,1 graus;
transform = "tradução (180,1,0,0)"