svg - SVG 文本旋转

Question

我有一个带有 textContent“设计”的文本，它用 css 转换为围绕中心（100,100）旋转 90 度，所以它垂直显示。它围绕中心旋转整个坐标系，我希望元素（即“设计”）单独旋转

原位置：

结果：

预期的 ：

SVG：

<svg>
<text x="70" y="30" width="64" height="16" fill="black" transform="rotate(90,100,100)">Design</text>
</svg>

问题是什么 ？为什么文本元素 x 位置发生了变化？我怎么能在固定的 x 位置旋转文本？

我想在固定的 x 位置旋转文本？

谢谢，

湿婆

Answer 1

如果您想要100,100旋转90角度的文本，请尝试以下操作：

<svg>
  <text text-anchor="middle" transform="translate(100,100) rotate(90)">Design</text>
</svg>

这比替代方案更直接。

请记住，参数和的顺序很重要。transformtranslaterotate

请参阅下面的片段以了解它如何改变结果。

.translate {
  stroke: green;
  stroke-width: 2;
  fill: none;
  }
  
.rotate {
  stroke: red;
  stroke-width: 2;
  fill: none;
  }
  
.reference {
  stroke: blue;
  border: solid 1px blue;
  }

<svg class="reference" width="250" height="170" viewBox="-125 -25 250 170">
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black"/>
  <line class="translate" x1="0" x2="100" y1="0" y2="100"/>
  <circle class="rotate" cx="100" cy="100" r="3"/>
  <text text-anchor="middle" class="reference">0,0</text>
  <text text-anchor="middle" transform="translate(100,100) rotate(90)">TR</text>
</svg>

<svg class="reference" width="250" height="170" viewBox="-125 -25 250 170">
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black"/>
  <path class="rotate" d="M -100 100 A 141.1 141.1 0 0 0 100 100"/>
  <line class="translate" x1="0" x2="-100" y1="0" y2="100"/>
  <text text-anchor="middle" class="reference">0,0</text>
  <text text-anchor="middle" transform="rotate(90) translate(100,100)">RT</text>
</svg>

Answer 2

原因可能是文本锚在中间，所以 (x, y) 坐标是文本的中心，它围绕其中心旋转。您可以向文本添加一个text-anchor="start"属性，但它不会居中。

编辑： x 坐标发生变化的原因是因为您围绕点 (100, 100) 旋转并且文本位于 (70, 30)。因此，文本相对于旋转中心位于 (-30, -70)，因此旋转 90 度后将位于 (70, -30)。为什么不以 (70, 30) 为中心旋转？

Answer 3

请遵循以下 3 个步骤：

1. <text>将元素包裹在<g>.
2. 移动/翻译<g>和因此<text>的锚点（这里：实际上是文本的顶部，旋转后）到所需的位置。
3. 旋转<text>，设置它的锚点并且不翻译，如下例所示。

小解释：

这个想法是将变换参考点移动到它所在的<text>位置并防止两个变换相互干扰，否则，平移和旋转将同时参考“其他地方”的点——很难控制。

<svg>
  <g transform="translate(42, 0)">
     <text
       text-anchor="start"
       transform="rotate(90)"
     >
       Design
    </text>
  </g>
</svg>

或者，如果您希望文本基线位于右侧（更容易阅读）：

<svg>
  <g transform="translate(42, 0)">
    <text
      text-anchor="end"
      transform="rotate(-90)"
    >
      Design
    </text>
  </g>
</svg>