46
C'è un modo per capovolgere il sistema di coordinate SVG in modo che [0,0] sia in basso a sinistra anziché in alto a sinistra?flip svg coordinate sistema
A
risposta
66
Ho fatto un sacco di sperimentazione, e l'unico metodo logico è il seguente:
<g transform="translate(0,400)">
<g transform="scale(1,-1)">
dove 400 è l'altezza dell'immagine. In questo modo sposta tutto verso il basso in modo che la parte superiore dell'immagine sia ora e la parte inferiore dell'immagine, quindi l'operazione di scala capovolge le coordinate Y, in modo che il bit che ora è fuori dalla pagina/immagine sia ribaltato per riempire lo spazio lasciato alle spalle.
4
Sì, una rotazione delle coordinate di -90 seguita da una traduzione di + l'altezza della nuova figura dovrebbe farlo. C'è un esempio su W3C.
+0
Penso che quello che aveva in mente è una rotazione di 180, seguita da una traduzione di -w e -h.Questo non funziona, [0,0] è ancora in alto a sinistra. – Nippysaurus
+0
Sospetto che l'implementazione SVG non sia conforme, il che non sorprende per una (presumibilmente) funzionalità usata raramente. Una rotazione affine di -90 muove il quadrante cartesiano IV (+ x, -y) nel quadrante I (+ x, + y). Una rotazione di 180 gradi metterebbe la cornice di riferimento nel quadrante II con l'origine in basso a sinistra. Il motivo per cui la tua auto-risposta funziona è che è congruente alla mia risposta originale, ma probabilmente utilizza i bit meglio testati del tuo interprete SVG di scelta. Personalmente, dovrei solo calcolare la trasformazione affine nel mio codice di spazio utente ed essere pessimista sulle funzionalità SVG. – msw
+0
Probabilmente hai ragione. Sto usando Safari su OS X 10.6, quindi lo testerò su una macchina Windows domani. – Nippysaurus
9
So che questo è vecchio, ma stavo facendo la stessa cosa, ho provato la versione @Nippysaurus ma questo è troppo fastidioso dal momento che tutto verrà ruotato (quindi se metti le immagini, dovrai ruotarle di nuovo). C'è un'altra soluzione anche se
Quello che ho fatto è stato semplicemente spostare il viewBox dello svg e invertire tutte le coordinate sull'asse y (e rimuovere anche l'altezza dell'oggetto da posizionare nell'angolo in basso a sinistra), ad esempio:
<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>
questo metterà una rect al 20,20 dall'angolo in basso a sinistra della svg, vedere http://jsfiddle.net/DUVGz/
+0
A prima vista questo sembra un kludge, tuttavia, dopo aver provato tutti delle altre soluzioni, devo concordare con @Guillaume che tutte le soluzioni 'transform' sono un PIA a causa dell'effetto sul testo, ecc ..., quindi questa è la soluzione che ho adottato per l'output SVG. – Grimxn
+0
Ma come cambieranno le trasformazioni all'interno delle trasformazioni? Cioè i gruppi nidificati ... –
-4
Penso che il modo più semplice per ruotare elemento di 180 gradi è che si ruota per 180.1 deg;
transform = "tradurre (180.1,0,0)"
+0
translate accetta solo due argomenti, cioè le coordinate x e y. Non penso che tenga le coordinate 3D (x, y, z). Per usare le coordinate 3D, devi usare translate3d() che prende 3 coordinate.Attenzione alla documentazione: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/ tradurre – ShellZero
2
la combinazione migliore in tutto ho trovato per la trasformazione di un sistema di coordinate cartesiane è:
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>Questa volontà di auto-unflip tutti gli elementi di testo su t lui pagina.
0
Se non si conosce la dimensione del SVG di quanto si possa utilizzare le trasformazioni CSS per l'intero elemento SVG:
#parrot {
transform-origin: 50% 50%; /* center of rotation is set to the center of the element */
transform: scale(1,-1);
}
Crediti: https://sarasoueidan.com/blog/svg-transformations/#transforming-svgs-with-css
0
Un'alternativa è quella di utilizzare D3 v4 scaleLinear per creare una funzione che farà lo scambio per te.
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
2
<g transform="translate(0,400) scale(1,-1)">
che anche equivalente al di sotto
<g transform="scale(1,-1) translate(0,-400) ">
Problemi correlati
- 1. Sistema di coordinate n-sfera a sistema di coordinate cartesiane
- 2. Modifica griglia sistema di coordinate
- 3. - Flip
- 4. Come convertire il sistema di coordinate frame di SubView nel sistema di coordinate Self View
- 5. Sistema di coordinate della core core
- 6. Come ruotare il sistema di coordinate?
- 7. Ottieni le coordinate del gruppo svg su trascinamento con snap.svg
- 8. Ottieni coordinate assolute per la rotazione degli elementi Inkscape SVG
- 9. Come ottengo le coordinate globali di un elemento svg raggruppato?
- 10. Perché il software utilizza spesso un sistema di coordinate inverse rispetto al normale sistema di coordinate matematiche?
- 11. Animazione flip, grow e Translate
- 12. Modifica del valore CGrect nel sistema di coordinate utente
- 13. Qual è l'unità del sistema di coordinate della tela? - android
- 14. informazioni sull'immagine lungo un sistema di coordinate polari
- 15. Come si capovolge il sistema di coordinate di un NSView?
- 16. Come posso ottenere il sistema di coordinate cartesiane in matplotlib?
- 17. Sistema di riferimento di coordinate non riconosciuto in gvNIX
- 18. Perché il sistema di coordinate del dispositivo normalizzato è mancino?
- 19. Converti latitudine e longitudine in sistema di coordinate ECEF
- 20. Come impostare QGraphicsScene/Visualizza su un sistema di coordinate specifico
- 21. Longitudine, latitudine, altitudine a 3D-Sistema di coordinate cartesiane
- 22. Android Flip ImageView Verticalmente
- 23. UIView flip verticalmente
- 24. Flip View Iphone
- 25. Flip Image with Graphics2D
- 26. Converti coordinate GPS in coordinate coordinate
- 27. Come posso convertire le coordinate SVG (x, y) definite relativamente a un elemento in coordinate/posizione assolute?
- 28. Animazione flip scheda di gioco
- 29. Come sincronizzare i sistemi di coordinate Three.js e HTML/SVG (in particolare con l'asse y)?
- 30. Ottenere le coordinate in coordinate
Hai bisogno del primo traduttore? L'ho già realizzato attraverso 'viewbox =" - 200 -200 400 400 "'. – SimplyKnownAsG
Queste operazioni possono essere combinate su un'unica riga. –
Ma ora il testo è capovolto. – felix