SVG 文本旋转

Question

我有一个带有 textContent "Design"的文本，它被 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>

这比替代方案更直接。
牢记 订购 的 transform参数， translate和 rotate ，事项。
请参阅下面的片段以了解它如何改变结果。

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