旋转 SVG 中的文本答案

【问题标题】：Rotate text in SVG旋转 SVG 中的文本
【发布时间】：2015-04-29 12:08:05
【问题描述】：

我有一个带有 svg 的图表，看起来像

现在我想像这样旋转文本

我的SVG root如下

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    version="1.1" baseProfile="full"
    viewbox="-75 0 1075 800"
    transform="translate(0, 750) scale(1, -1)"
    width="1000" height="800">
</svg>

如果我尝试旋转文本

<text x="-70" y="50%" stroke="blue" transform="rotate(90)">U [mV]</text>

文字消失了。

有

<text x="-70" y="50%" stroke="blue" transform="rotate(90 -70 50%)">U [mV]</text>

什么都没有发生。

如何旋转第二张图片中显示的三个文本对象？谢谢。

【问题讨论】：

不确定 100% 发生了什么，但我怀疑它围绕错误的点“旋转”，文本最终出现在不同的位置，在您的第一种情况下可能不在屏幕上。尝试仅旋转 1，看看它是否有轻微移动——这可能会给你一些确切的指示。
transform svg 中的属性（目前）不支持百分比值，希望将来会支持。小提琴可能很好，但你的问题很可能是由于翻转的坐标系，有几种方法可以解决这个问题。
有一个类似问题的answer 也应该对您有用。这特别解决了在以一定百分比定位的元素上使用旋转。如果您没有将50% 定位为相对值，则有更简单的解决方案。在这种情况下，请更具体一些，并提供更多代码以获得好的答案。
另一个旁注，虽然这与您的问题没有直接关系：您的 <svg> 根元素存在缺陷。根据spec，它不支持transform 属性。尽管某些用户代理可能会正确呈现它，但您可能应该插入 <g> 并对其应用转换以完全符合规范。
来自@altocumulus 的带有<g>-Tag 的提示很好（带有<svg>-Tag 的提示应该类似）。如果我也将它用于我的文本对象，我可以为这个对象定义一个新的坐标系并旋转到原点（这是我想要旋转的错误点，就像@Flynn1179 的评论中所说的那样）。

标签： xml svg rotation scale scaletransform

【解决方案1】：

以下内容现在对我有用：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    version="1.1" baseProfile="full"
    viewbox="-75 0 1075 800"
    width="1000" height="800">

    <g transform="translate(0, 750) scale(1, -1)"> <!-- hint from @altocumulus -->
        ...

        <g transform="translate(-75, 375) scale(1, -1) rotate(-90)">
            <!--
                translate(x, y) => create a new local coordination system
                with the point of origin at this point
            -->

            <text stroke="blue">U [mV]</text>
        </g>

        ...
    </g>
</svg>

【讨论】：