css - SVG 在组中旋转文本 180 度(翻转)

Question

我有一个我创建的 SVG 垂直条形图。我从下到上为垂直条设置了动画。为了更容易地做到这一点，我对带有缩放和平移修改的条形组应用了一个转换，使我的矩形从下到上，从左到右。

每个组看起来像这样:

<g class="bar" transform="scale(1,-1) translate(0,-390)">

问题是我想显示在每个垂直条顶部的文本标签(逻辑上)翻转了 180 度。

<text x="110" y="252.1042">31.039</text>

我想将文本元素翻转 180 度以很好地放置在我的垂直条上，但我无法理解语法...

我用这里的工作代码制作了一个 CodePen: CodePen

非常感谢任何建议或帮助，包括 RTFM 以及我应该在哪里阅读的引用。

Answer 1

IMO，最简单的解决方案是只转换 <rect>并保留文本。

<g class="bar">
    <rect x="110" y="-10" width="64" height="242.1042"
          transform="scale(1,-1) translate(0,-390)">
    <animate attributeName="height" from="-10" to="242.1042" dur="0.5s" fill="freeze" />
    </rect>
    <text x="110" y="147.8958">31.039</text>
</g>

要将文本放在正确的位置，只需设置 y到 (400 - val)，而不是 (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 version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" aria-labelledby="Sales Figures" role="img">
  
<title id="title">Sales Figures</title>

  <g class="grid x-grid">
    <line x1="80" x2="80" y1="5" y2="406"></line>
    <line x1="800" x2="800" y1="5" y2="406"></line>
</g>
<g class="grid y-grid">
    <line x1="70" x2="800" y1="400" y2="400"></line>
</g>
<g class="grid y-grid2">
    <line x1="70" x2="800" y1="10" y2="10"></line>
    <line x1="70" x2="800" y1="54" y2="54"></line>
    <line x1="70" x2="800" y1="98" y2="98"></line>
    <line x1="70" x2="800" y1="142" y2="142"></line>
    <line x1="70" x2="800" y1="186" y2="186"></line>
    <line x1="70" x2="800" y1="230" y2="230"></line>
    <line x1="70" x2="800" y1="274" y2="274"></line>
    <line x1="70" x2="800" y1="318" y2="318"></line>
    <line x1="70" x2="800" y1="362" y2="362"></line>
</g>
<g class="labels y-labels">
    <text x="60" y="16">50</text>
    <text x="60" y="406">0</text>
</g>
<g class="labels label-title chartlabels">
    <text x="60" y="160" class="y-label1" transform="rotate(270, 60, 200)">Euros in Millions</text>
</g>
<g class="grid x-grid2" id="xGrid2">
    <line x1="200" x2="200" y1="400" y2="411"></line>
    <line x1="320" x2="320" y1="400" y2="411"></line>
    <line x1="440" x2="440" y1="400" y2="411"></line>
    <line x1="560" x2="560" y1="400" y2="411"></line>
    <line x1="680" x2="680" y1="400" y2="411"></line>
</g>

<g class="labels x-labels">
    <text x="140" y="424">2012</text>
</g>

  
  
<g class="bar">
    <rect x="110" y="-10" width="64" height="242.1042" transform="scale(1,-1) translate(0,-390)">
    <animate attributeName="height" from="-10" to="242.1042" dur="0.5s" fill="freeze" />
    </rect>
    <text x="110" y="147.8958">31.039</text>
</g>

<g class="labels x-labels">
    <text x="260" y="424">2013</text>
</g>
<g class="bar">
    <rect x="230" y="-10" width="64" height="283.6041" transform="scale(1,-1) translate(0,-390)">
    <animate attributeName="height" from="-10" to="283.6041" dur="0.5s" fill="freeze" />
    </rect>
    <text x="230" y="106.3959">36.3595</text>
</g>

<g class="labels x-labels">
    <text x="380" y="424">2014</text>
</g>
<g class="bar">
    <rect x="350" y="-10" width="64" height="331.9329" transform="scale(1,-1) translate(0,-390)">
    <animate attributeName="height" from="-10" to="331.9329" dur="0.5s" fill="freeze" />
    </rect>
    <text x="350" y="58.0671">42.5555</text>
</g>

<g class="labels x-labels">
    <text x="500" y="424">2015</text>
</g>
<g class="bar">
    <rect x="470" y="-10" width="64" height="330.8292" transform="scale(1,-1) translate(0,-390)">
    <animate attributeName="height" from="-10" to="330.8292" dur="0.5s" fill="freeze" />
    </rect>
    <text x="470" y="59.1708">42.414</text>
</g>

<g class="labels x-labels">
    <text x="620" y="424">2016</text>
</g>
<g class="bar">
    <rect x="590" y="-10" width="64" height="302.8233" transform="scale(1,-1) translate(0,-390)">
    <animate attributeName="height" from="-10" to="302.8233" dur="0.5s" fill="freeze" />
    </rect>
    <text x="590" y="87.1767">38.8235</text>
</g>

<g class="labels x-labels">
    <text x="740" y="424">2017</text>
</g>
<g class="bar">
    <rect x="710" y="-10" width="64" height="374.5716" transform="scale(1,-1) translate(0,-390)">
    <animate attributeName="height" from="-10" to="374.5716" dur="0.5s" fill="freeze" />
    </rect>
    <text x="710" y="15.4284">48.022</text>
</g>
<g class="labels x-labels">
    <text x="440" y="448" class="label-title x-label">YEAR</text>
</g>
</svg>