【发布时间】：2021-06-26 22:48:26
【问题描述】：
我真的很难理解<text> 元素应该如何在<svg> 中以可控方式旋转。具体例子在这里：
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
<line x1="11" x2="200" y1="11" y2="142.2" stroke="black"/>
<line x1="200" x2="400" y1="142.2" y2="121" stroke="black"/>
<line x1="400" x2="600" y1="121" y2="167.6" stroke="black"/>
<line x1="600" x2="989" y1="167.6" y2="11" stroke="black"/>
<rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="11" transform="translate(-10,-10)"/>
<text text-anchor="end" x="17" y="32" transform="rotate(-90,17,32)" class="label-below-project-point" >abcdef</text>
<rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="200" y="142.2" transform="translate(-10,-10)"/>
<text x="206" y="121.2" transform="rotate(-90,206,121.2)" class="label-above-project-point" >abc</text>
<rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="400" y="121" transform="translate(-10,-10)"/>
<text x="406" y="100" transform="rotate(-90,406,100)" class="label-above-project-point" >abcdefghijklmnopq</text>
<rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="600" y="167.6" transform="translate(-10,-10)"/>
<text x="606" y="146.6" transform="rotate(-90,606,146.6)" class="label-above-project-point" >abcdefg</text>
<rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="989" y="11" transform="translate(-10,-10)"/>
<text text-anchor="end" x="995" y="32" transform="rotate(-90,995,32)" class="label-below-project-point" >abcdefghijklmnopqrstuvwxy</text>
</svg>当用户单击其中一个矩形时间轴点时，我想将文本元素旋转 90 度以水平显示它们，并将标签与其所指的时间轴矩形对齐。 更准确地说：
-
当点击最左边的时间线点时，标签会旋转90度以水平显示+左对齐最左边矩形的左边框。
-
对于最右边的点，首先旋转 90 度以产生水平显示，然后将文本元素与最右边矩形的右边框右对齐。
-
对于所有中间点，也先旋转 90° 以进行水平显示，然后将文本相对于相应时间线点的中心居中对齐。
<text> 元素是使用提供的文本标签以编程方式生成的，因此它们可以包含 1 到 30 个字符之间的任意数字；导致可变的宽度和高度。
示例
旋转永远不会像我期望的那样。例如，当我尝试通过将旋转原点设置为左下角并将旋转角度设置为 90 来旋转最左边的 <text> 元素时，<text> 元素会在 svg 的顶部边框顶部旋转.不知道为什么。重现它：
- 将
getBBox()应用于文本元素以获取其宽度W。 - 将
W+text元素的y属性的值相加得到最左侧文本元素左下角的y坐标；Y。 - 将相应的旋转命令：
rotate(90,0,Y)添加到最左侧文本元素的transform元素中，您会得到： -
transform="rotate(-90,17,32) rotate(90,0,Y)。旋转完全不像您预期的那样...
示例 2
我误会了什么？让我也用@Danny '365CSI' Engelman 提供的 sn-p 来说明我的问题：
<style>
svg { height: 180px }
circle{ r:2px; fill:red }
</style>
<svg id=SVG viewbox="0 0 100 100">
<rect width="100%" height="100%" fill="pink"></rect>
<circle cx="25" cy="50"></circle>
<text x="25" y="50" text-anchor="start"
transform="rotate(-90 25 50)">Hello</text>
<circle cx="50" cy="50"></circle>
<text x="50" y="50" text-anchor="end" dominant-baseline="hanging"
transform="rotate(90 50 50)">SVG</text>
<circle cx="75" cy="50"></circle>
<text x="75" y="50" text-anchor="middle" dominant-baseline="middle"
transform="rotate(-45 75 50)">World</text>
</svg>假设我现在想将“Hello”文本元素旋转 90 度以使其水平显示，其旋转原点位于文本元素的中心。因此，我首先按如下方式计算文本元素的中心：
-
使用
document.getElementsByTagName("text")[0].getBBox();获取相关元素的尺寸。这将返回一个高度为 16.38888931274414 SVG 单位、宽度为 36.10185241699219 SVG 单位的 SVG 矩形。 -
我现在计算文本元素中心的坐标，如下所示：
x = 25 - 16.38888931274414 / 2 = 大约16.81
y = 50 - 36.10185241699219 / 2 = 大约。 31.95
- 我现在将
rotate(90 16.81 31.95)添加到transform 属性中，然后完全无法按预期获得文本元素的90° 旋转；如您在此处所见：
<style>
svg { height: 180px }
circle{ r:2px; fill:red }
</style>
<svg id=SVG viewbox="0 0 100 100">
<rect width="100%" height="100%" fill="pink"></rect>
<circle cx="25" cy="50"></circle>
<text x="25" y="50" text-anchor="start"
transform="rotate(-90 25 50) rotate(90 16.81 31.95)">Hello</text>
<circle cx="50" cy="50"></circle>
<text x="50" y="50" text-anchor="end" dominant-baseline="hanging"
transform="rotate(90 50 50)">SVG</text>
<circle cx="75" cy="50"></circle>
<text x="75" y="50" text-anchor="middle" dominant-baseline="middle"
transform="rotate(-45 75 50)">World</text>
</svg>我在这里不明白什么/如何计算旋转中心+从而正确预测旋转?????????
【问题讨论】：
-
如果你想垂直显示文本，使用写作模式和文本方向有一个更简单的方法。否则，它取决于文本是如何垂直旋转的。 IE。提供一个minimal reproducible example，以您要旋转的方向显示它。
-
尽量简化问题和我sn-p的代码。任何线索@RobertLongson？
标签： html css svg rotation transform