Autodesk Forge Viewer中SVG foreignObject内文本x轴倒置问题

数据老陈

2026-10-17

问题根因

你遇到的字符倒置问题由外层SVG的全局变换导致：外层SVG设置了transform: scale(1,-1)做垂直翻转，该变换会继承到所有子元素，包括foreignObject内部的HTML元素。你绘制的path适配了翻转后的坐标系所以显示正常，但HTML元素会被全局翻转直接影响，出现字符倒置的表现。
Autodesk Forge的MarkupsCore扩展本身为了适配Viewer的2D坐标系（原点在左下角，Y轴向上），默认就会给标记层SVG添加这个垂直翻转规则，属于框架的默认设计。

解决步骤

给foreignObject添加反向翻转抵消父级的全局变换，在原有transform属性末尾追加scale(1,-1)即可：

<!-- 注意transform末尾追加了scale(1,-1)，y属性调整为等于height值修正翻转后的位置偏移 -->
<foreignObject x="0" y="50" width="100" height="50" transform="translate( 25.07833084584351 , 104.7208155667812 ) rotate( 0 ) scale(1,-1)">

清理textarea的冗余样式，删掉left、top属性，这两个属性会让输入框超出foreignObject的可视范围，调整为适配foreignObject的尺寸即可：

textarea {
  resize: none; 
  box-sizing: border-box; 
  overflow: hidden; 
  z-index: 1; 
  padding: 5px; 
  line-height: 130%; 
  width: 100%;
  color: rgb(255, 0, 0); 
  font-family: Arial; 
  font-size: 10px; 
  font-weight: normal; 
  font-style: normal; 
  height: 23px; 
  border: 1px solid red;
}