arc - flip svg sistema de coordenadas
svg path id (8)
Creo que la forma más sencilla de rotar el elemento durante 180 grados es que gira por 180.1 grados;
transform = "traducir (180.1,0,0)"
¿Hay alguna manera de voltear el sistema de coordenadas SVG para que [0,0] esté en la parte inferior izquierda en lugar de la esquina superior izquierda?
El mejor combo que he encontrado para transformarme en un sistema cartesiano de coordenadas es bastante simple:
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>
Esto desbloqueará automáticamente todos los elementos de texto en la página a través de la escala de cssY scaleY(-1) .
He hecho mucha experimentación, y el único método lógico es el siguiente:
<g transform="translate(0,400)">
<g transform="scale(1,-1)">
Donde 400 es la altura de la imagen. Lo que hace esto mueve todo hacia abajo para que la parte superior de la imagen esté ahora y la parte inferior de la imagen, luego la operación de escala invierte las coordenadas Y, de modo que el bit que ahora está fuera de la página / imagen se invierte para llenar el espacio dejado atrás
Sé que esto es viejo, pero estaba haciendo lo mismo, intenté con la versión de @Nippysaurus, pero esto es demasiado molesto ya que todo se rotará (por lo tanto, si colocas imágenes, deberás girarlas hacia atrás). Sin embargo, hay otra solución
Lo que hice fue simplemente mover el viewBox del svg e invertir todas las coordenadas en el eje y (y eliminar la altura del objeto para que esté en la esquina inferior izquierda también), 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>
esto pondrá un rect a las 20,20 desde la esquina inferior izquierda de la svg , ver http://jsfiddle.net/DUVGz/
Sí, una rotación de coordenadas de -90 seguida de una traducción de + la altura de su nueva figura debería hacerlo. Hay un ejemplo en W3C .
Si no conoce el tamaño de svg, puede usar las transformaciones de CSS para todo el 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
Una alternativa es usar D3 v4 scaleLinear para crear una función que hará el intercambio por usted.
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
<g transform="translate(0,400) scale(1,-1)">
que también es equivalente a debajo
<g transform="scale(1,-1) translate(0,-400) ">