Flip-Svg-Koordinatensystem

Gibt es eine Möglichkeit, klappen Sie das SVG-Koordinatensystem so, dass [0,0] ist in der linken unteren statt die oberen Links?

InformationsquelleAutor der Frage Nippysaurus | 2010-10-02

  1. 66

    Ich habe eine Menge Experimente, und die einzig logische Methode ist wie folgt:

    <g transform="translate(0,400)">
<g transform="scale(1,-1)">

    Wo 400 ist die Höhe des Bildes. Was diese bewegt es sich alles nach unten, so dass die oben auf dem Bild jetzt ist, und der untere Rand des Bildes, dann ist die Skala Betrieb dreht die Y-Koordinaten, so dass das bit, das ist nun ausgeschaltet, die Seite/das Bild ist umgedreht, zurück zu füllen den Raum hinter sich gelassen.

    InformationsquelleAutor der Antwort Nippysaurus

  2. 9

    Ich weiß, das ist alt, aber ich war die gleiche Sache zu tun, versucht @Nippysaurus-version, aber das ist mir zu lästig, weil alles, was gedreht werden (so, wenn Sie Bilder haben, müssen Sie drehen Sie Sie zurück). Es gibt eine andere Lösung, obwohl

    Was ich Tat, war einfach die viewBox des svg " und "umkehren" werden alle Koordinaten auf der y-Achse und entfernen die Höhe des Objekts werden in der unteren linken Ecke auf Sie zu), wie:

    <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>

    diese stellen eine rect auf 20,20 von der unteren linken Ecke des svg finden Sie http://jsfiddle.net/DUVGz/

    InformationsquelleAutor der Antwort Guillaume

  3. 4

    Ja, ein Koordinatensystem-Drehung von -90 gefolgt von einer übersetzung + die Höhe von Ihrem neuen Bild sollte es tun. Es gibt ein Beispiel, bei W3C.

    InformationsquelleAutor der Antwort msw

  4. 3
    <g transform="translate(0,400) scale(1,-1)">

    dem auch entspricht unter 

    <g transform="scale(1,-1) translate(0,-400) ">

    InformationsquelleAutor der Antwort Scyllar

  5. 1

    Wenn Sie nicht wissen, die Größe des svg, als Sie den Einsatz von CSS-Transformationen für die gesamte SVG-element:

    #parrot {
    transform-origin: 50% 50%; /* center of rotation is set to the center of the element */
    transform: scale(1,-1);
}

    Credits:
    https://sarasoueidan.com/blog/svg-transformations/#transforming-svgs-with-css

    InformationsquelleAutor der Antwort Vereb

  6. 0

    Alternative ist die Verwendung von D3 v4 scaleLinear um eine Funktion zu erstellen, die auslagerungsfunktion für Sie.

    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

    Sehen lauffähige code per tonic

    InformationsquelleAutor der Antwort Bae

  7. -4

    Ich denke, der einfachste Weg zu drehen element für 180 deg ist, dass Sie drehen für 180.1 deg;

    transform="translate(180.1,0,0)"

    InformationsquelleAutor der Antwort ozi

Schreibe einen Kommentar