Reputation: 55
I have a bar chart with the bars going horizontal created in an SVG. How would I flip the SVG to make the bar graph vertical?
I currently have transform: 1, -1
in my CSS file but it isn't working. Any other suggestions?
Upvotes: 0
Views: 1450
Reputation: 12458
The example below demonstrates one strategy you might use. In the SVG code one labeled graph is drawn 5 times:
For each graph the outer <g>
element is simply to position the five graphs next to each other and is irrelevant to understanding the graph-flip. In contrast, the inner <g>
element has the transform that is critical for understanding the graph-flip.
<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>
Upvotes: 2
Reputation: 1722
You can use transform
and rotate()
to turn the SVG 90 degrees.
Example:
transform: rotate(90);
Note: Since you didn't provide any code, after using
rotate()
you may also need to move the SVG back into place by usingtranslate()
.
Upvotes: 2