Wie man SVG-Koordinaten kippt?

Ich habe ein Balkendiagramm mit den Bars gehen horizontal erstellt in einem SVG. Wie würde ich das SVG spiegeln, um das Balkendiagramm vertikal zu machen?Wie man SVG-Koordinaten kippt?

Ich habe derzeit transform: 1, -1 in meiner CSS-Datei, aber es funktioniert nicht. Irgendwelche anderen Vorschläge?

Quelle

2017-02-09 tralifa

Das folgende Beispiel zeigt eine Strategie, die Sie verwenden könnten. In dem SVG-Code eine markierte Graph 5 mal gezogen wird:

(untransformierten original)
- um 90 Grad gedreht
- um 90 Grad gedreht ,
- dann vertikal gespiegelt (und zurück in die Position übersetzt) 
- um 90 Grad gedreht,
- dann vertikal umgedreht (und zurück in die Position übersetzt) ,
- dann mit allen Etiketten wieder vertikal gekippt, um die Ausrichtung jedes wieder herzustellen (mit jedem Etikett getrennt zurück in Position übersetzt) 
- um 90 Grad gedreht,
- dann vertikal umgedreht (und zurück in die Position übersetzt) ,
- dann mit allen Etiketten wieder vertikal gekippt die Ausrichtung jeder (mit jedem Etikett getrennt wiederherzustellen zurück in der Position übersetzt) ,
- dann mit dem X-Label um 180 Grad gedreht

Für jedes Diagramm ist das äußere <g> Element einfach, um die fünf Diagramme nebeneinander zu positionieren und ist für das Verständnis des graph-flip irrelevant.Im Gegensatz dazu hat das innere <g> Element die Transformation, die für das Verständnis des Graph-Flip entscheidend ist.

<svg width="600"> 
 
    <defs> 
 
    <g id="graph" fill="none" stroke="black"> 
 
     <polyline points="20,0 20,90 110,90"/> 
 
     <rect x="30" y="10" width="20" height="80"/> 
 
     <rect x="70" y="40" width="20" height="50"/> 
 
    </g> 
 
    <g id="X_label"> 
 
     <text transform="translate(24,110)">X values</text> 
 
    </g> 
 
    <g id="Y_label"> 
 
     <text transform="rotate(270) translate(-86,12)">Y values</text> 
 
    </g> 
 
    </defs> 
 
    <g transform="translate(0)"> 
 
    <g transform=""> 
 
     <use href="#graph"/> 
 
     <use href="#X_label"/> 
 
     <use href="#Y_label"/> 
 
    </g> 
 
    </g> 
 
    <g transform="translate(120)"> 
 
    <g transform="rotate(90,60,60)"> 
 
     <use href="#graph"/> 
 
     <use href="#X_label"/> 
 
     <use href="#Y_label"/> 
 
    </g> 
 
    </g> 
 
    <g transform="translate(240)"> 
 
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)"> 
 
     <use href="#graph"/> 
 
     <use href="#X_label"/> 
 
     <use href="#Y_label"/> 
 
    </g> 
 
    </g> 
 
    <g transform="translate(360)"> 
 
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)"> 
 
     <use href="#graph"/> 
 
     <use href="#X_label" transform="scale(-1,1) translate(-120,0)"/> 
 
     <use href="#Y_label" transform="scale(-1,1) translate(-15,0)"/> 
 
    </g> 
 
    </g> 
 
    <g transform="translate(480)"> 
 
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)"> 
 
     <use href="#graph"/> 
 
     <use href="#X_label" transform="scale(-1,1) translate(-120,0) rotate(180,55,104)"/> 
 
     <use href="#Y_label" transform="scale(-1,1) translate(-15,0)"/> 
 
    </g> 
 
    </g> 
 
</svg>

Quelle

2017-02-09 22:52:07

Sie können transform und rotate() verwenden, um das SVG um 90 Grad zu drehen.

Beispiel:

transform: rotate(90);

Hinweis: Da Sie keinen Code vorsah, nach rotate() verwenden, können Sie auch mit translate() der SVG wieder an den richtigen Platz müssen.

Quelle

2017-02-09 21:32:33

Wie man SVG-Koordinaten kippt?

Antwort

Verwandte Themen