SVG rotate text 180 degrees (flip) in group

Question

I have an SVG vertical bar chart I created. I have animated the vertical bars from bottom to top. In order to more easily do this I applied a transformation to the bar group with scale and translate modifications to make my rectangles go from bottom to top and left to right.

Each group looks like this:

The problem is that the text labels I want to appear on top of each vertical bar are (logically) flipped 180 degrees.

31.039

I would like to flip text elements 180 degrees to sit nicely atop my vertical bars and I just can't figure the syntax...

I made a CodePen with the working code here: CodePen

Any suggestions or assistance would be most appreciated including RTFM with a reference as to where I should read.

Paul LeBeau · Accepted Answer

IMO, the simplest solution is to just transform the and leave the text alone.

To get the text in the right place, just set the y to (400 - val), instead of (val).

.wst_chart {

/*	display: none; */

	text-align: center;
	background-color: white;
	width: 90%;
	border: 1px solid darkgray;

	margin: 0 auto 2% auto;
	padding-bottom: 0;
}

.graph {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;

	padding: 1% 0 1% 0;

	height: 440px;
	width:  880px;
}

.graph .grid {
	stroke: #cccccc;
	stroke-dasharray: 0;
	stroke-width: 1;
}

.graph .x-grid, .graph .y-grid {
	stroke: black;
	stroke-width: 2;
}

.labels {
	font-size: 13px;
}

.label-title {
	font-weight: bold;
	font-size: 12px;
	fill: black;
}

.graph .labels.x-labels {
	text-anchor: middle;
}

.graph .labels.y-labels {
	text-anchor: end;
}

.graph .labels.y-labels2 {
	text-anchor: start;
}

.graph .y-label1, .graph .y-label2 {
	text-anchor: middle;
}

.x-labels, .label-title, .y-label1, .y-label2, .CPI, .ARun, .G1G2 {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}

.graph .line {
	fill: none;
	stroke-width: 3;

	transition: 0.5s;
}

.graph .line2 {
	fill: none;
	stroke-width: 3;
	stroke-dasharray: 5;
}

.graph .lineCPI {
	stroke: orange;
}

.graph .labels .CPI {
	fill: orange;
}

.graph .lineARun {
	stroke: blue;
}

.graph .ARun {
	fill: blue;
}

.graph .lineG1G2 {
	stroke: purple;
}

.graph .G1G2 {
	fill: purple;
}

.graph .bar {
	fill: darkred;
}

.graph .bar:hover, .graph .bar:focus {
	fill: black;
}

.graph .bar text {
	visibility: hidden;
}

.graph .bar:hover text, .graph .bar:focus text {
	visibility: visible;
	fill: black;
}

SVG rotate text 180 degrees (flip) in group

Answers (2)

Related Questions