将 HTML SVG 文本旋转 270 度答案

【问题标题】：Rotate HTML SVG Text by 270 degrees将 HTML SVG 文本旋转 270 度
【发布时间】：2016-03-27 18:49:46
【问题描述】：

我很难理解文本的旋转如何与 Html SVG 文本标签一起工作。

我读到了这个，有点类似的问题rotate x axis text in d3，但答案似乎并不适用——无论如何我都知道。

采用以下 SVG 标记：

<svg>
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text x="42" y="73" font-size="10">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
  </g>
</svg>

有一些文字，在第三组； '失踪'

我正在尝试将这个 270 度旋转，但很难理解它从哪里旋转。我读过它是从 origin 旋转的，但它的起源是什么？

我已经尝试过类似transform="rotate(270, 42, 73)" 和各种其他数字来代替 42 和 73。我最终可以通过猜测将它放在正确的位置，尽管不了解它的实际工作原理，然后我无法添加向其他组发送文本并旋转它。

那么，我如何旋转这个，用外行的话来说，它是如何工作的？

为了澄清 - 我希望实现：

【问题讨论】：

与其猜测，你为什么不阅读文档？ w3.org/TR/SVG/coords.html 将是一个很好的起点。有很多东西要读，但至少你会明白你在做什么。
时间因素决定了寻求帮助与阅读大量文档。我很确定 95% 的关于 SO 的问题都可以通过阅读文档来回答，尽管在现实世界中，这并不总是那么简单
它的较短版本：D sarasoueidan.com/blog/svg-transformations/#rotation
插图丰富的版本：css-tricks.com/transforms-on-svg-elements
请注意，我相信您的问题实际上不是旋转本身，而是文本的实际位置。但是您没有提供您希望输出实际是什么的指示。令人惊讶的是来自具有如此声誉的人......

标签： html svg

【解决方案1】：

文本以您提供的坐标开始的基线定位。在您的示例中，您将“3”和“Missing”定位在同一位置。尝试为转换找到正确的值，将文本从那里旋转到适当的位置，这会不必要地使过程复杂化。

我建议将“缺失”放置在您希望（很快成为垂直）基线开始的位置，并在找到正确位置后应用旋转。

第一步：定位文字

<svg width="200" viewBox="0 0 100 100">
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text x="52" y="63" font-size="10">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
  </g>
</svg>

第二步：现在旋转

(52,63) 看起来差不多。所以现在我们可以将这些坐标重新用于rotate()。

<svg width="200" viewBox="0 0 100 100">
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text x="52" y="63" font-size="10" transform="rotate(270 52 63)">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
    <text x="72" y="63" font-size="10" transform="rotate(270 72 63)">Missing</text>
  </g>
</svg>

最终，Robert 的解决方案更简单，但我想帮助您了解旋转变换如何处理文本。

【讨论】：

这个问题，是我所经历的。尝试对第 4 个盒子做同样的事情； IE <text x="62" y="63" font-size="10" transform="rotate(270 62 63)">Missing</text> - 不对齐

【解决方案2】：

这似乎与图纸大致匹配。默认旋转原点在左下角。

<svg>
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text transform="rotate(270, 42, 73) translate(10,10)" x="42" y="73" font-size="10">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
  </g>
</svg>

【讨论】：

完美！ - 所以 translate() 然后移动原点。伟大的。谢谢