将HTML SVG文本旋转270度

Question

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

我读过这个，有点类似的问题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>

第3组中有一些文字; ＆＃39;缺少＆＃39;

我试图旋转270度，但努力了解旋转的位置。我已经从原点中读取了它，但是它的起源是什么？

我已经尝试了transform="rotate(270, 42, 73)"和其他各种数字来代替42和73.我最终可以通过猜测将它放在正确的位置但不了解它是如何工作的，然后我无法将文字添加到其他群组并旋转它。

那么，我如何轮换这一点，并以外行人的话说，它是如何运作的？

澄清 - 我希望实现：

Answer 1

文本的定位基线从您提供的坐标开始。在您的示例中，您将“3”和“缺失”定位在相同位置。试图找到正确的变换值，将文本从那里旋转到位置，这会使过程变得不必要。

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

第一步：定位文字

<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的解决方案更简单，但我想帮助您了解旋转变换如何与文本一起使用。

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