xml - 在 SVG 中旋转文本

标签 xml svg rotation scale scaletransform

我得到了一个 svg 图表,看起来像 Chart

现在我想旋转像 Chart 这样的文本

我的 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>

没有任何反应。

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

最佳答案

以下现在对我有用:

<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>

关于xml - 在 SVG 中旋转文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29943303/

相关文章:

javascript - 在 SVG 中绘制线条

maven-2 - 如何使用 maven 从 SVG 生成 ICO 文件?

ios - CABasicAnimation 旋转返回到原始位置

xml sel -t -m 根本不适合我

wpf - Silverlight 不支持 XmlNode : re-implement or use string parsing?

svg - 如何使用 Dart 向 SVG 动态添加线性渐变

ios - 状态栏在旋转时隐藏时调整 View

ios - 在旋转 View 之间传输值 - iOS

JavaScript Birt Try catch 可以工作,但仍然出错

java - 使用 XStream 的 Xml 结构