SVG foreignObject textarea 和 text 元素的字符在 x 轴上反转

问题描述

我正在为 Autodesk Forge Viewer（Markupscore 扩展）创建自定义测量工具。 我已经相当容易地使用 SVG <path> 标签实现了线条绘制部分。但是，一旦调用 <textarea> 事件（用户完成绘制线条后），我想为用户呈现一个 onmouseup 以输入数值。为此，我使用了 foreignObject，带有用于输入的文本区域和用于显示文本的文本标签。 出于某种原因，我输入到这个 textarea 的字符是“颠倒的”。 textarea 本身不是；书写方向仍然是左→右。只是个别字符颠倒了。它看起来像这样：

生成的标记如下所示：

<svg version="1.1" baseProfile="full" layer-order-id="markups-svg" style="position:absolute; left:0; top:0; transform:scale(1,-1); -ms-transform:scale(1,-1); -webkit-transform:scale(1,-1); -moz-transform:scale(1,-1); -o-transform:scale(1,-1); transformOrigin:0,0; -ms-transformOrigin:0,0; -webkit-transformOrigin:0,0; -moz-transformOrigin:0,0; -o-transformOrigin:0,0; " width="1550" height="600" viewBox="-101.7644738631413 25.603030631786396 488.57934430714505 189.12748319689365" pointer-events="painted" cursor="crosshair">
   <g cursor="default">
      <g cursor="inherit" pointer-events="stroke">
         <path id="markup" d="m 0 5 v 0 -10 m -5 0 l 10 10 M 0 0 L 79.59484653519095 0 m 0 5 v 0 -10 m -5 0 l 10 10" stroke-width="0.49516667683974447" stroke="rgba(255,1)" fill="none" transform="translate( 25.07833084584351,104.7208155667812 ) rotate( 0 )"></path>
         <path id="hitarea" fill="transparent" stroke="transparent" d="m 0 5 v 0 -10 m -5 0 l 10 10 M 0 0 L 79.59484653519095 0 m 0 5 v 0 -10 m -5 0 l 10 10" stroke-width="9.95154083668433" transform="translate( 25.07833084584351,104.7208155667812 ) rotate( 0 )"></path>
         <foreignObject x="0" y="0" width="100" height="50" transform="translate( 25.07833084584351,104.7208155667812 ) rotate( 0 )">
            <textarea rows="1" dir="auto" maxlength="10" data-i18n="Text" style="resize: none; Box-sizing: border-Box; overflow: hidden; z-index: 1; padding: 5px; line-height: 130%; left: 468px; top: 198px; width: 150px; color: rgb(255,0); font-family: Arial; font-size: 10px; font-weight: normal; font-style: normal; height: 23px; opacity: 0; border: 1px solid red;"></textarea>
            <text style="color: red; opacity: 1;">1234</text>
         </foreignObject>
      </g>
   </g>
</svg>

知道发生了什么吗？我尝试重置浏览器样式，尝试摆弄 rotate 属性，并尝试向 SVG 添加命名空间属性，但这些属性对文本方向没有任何影响。 我对使用 SVG 和 foreignObjects 完全陌生，如果我不清楚并且没有提供足够的信息，我很抱歉。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）