我创建了一个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以及我应该阅读的地方。
答案 0 :(得分：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>
答案 1 :(得分：0)
我可能会在没有翻动场景的情况下这样做，但为了回答你的问题，你可以改变这个：
<text x="230" y="293.6041">36.3595</text>
进入这个：
<text transform="translate(230, 293.6041) scale(1,-1)">36.3595</text>
文本会比它更高一点，你可以通过改变一个平移y坐标来调整。