Question

我的svg中有一个文本输入框，使用'foreignObject'标记。

这很好用，但是如果你输入的输入框长于它的宽度，那么它会溢出，那么文本实际上会出现在页面的其他位置 - 可能是没有外来对象标签的默认位置......

以下是一些屏幕截图，用于解释正在发生的事情......

- 在输入溢出之前（一切都很好）

- 文本开始溢出你可以看到输入文本然后开始出现在屏幕的左上角而不是文本框的位置？

html代码的snipet：

<foreignObject x="-23" y="-8" width="40" height="16" style="overflow:visible;" transform="translate(0,0) scale(1,-1)">
     <input type="text" value="50"  style="width: 40px; height:16px;" class="tableinput1">
</foreignObject>

的CSS：

.tableinput1 {
    font: 0.6em verdana;
    text-align:left;
    color:black;
    background-color:rgba(0, 0, 0, 0);
    border: none;
    outline:none;
}

任何人都有任何想法为什么会发生这种情况？感谢

--- ---更新

报告为chrome中的错误 - https://bugs.chromium.org/p/chromium/issues/detail?id=694286&q=label%3ANeeds-Milestone&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

无法使用Chrome

在safari＆amp;火狐

https://jsfiddle.net/mpwaw/xcx2e56L/

文本输入框为SVG中的“foreignObject” - 文本溢出问题

0 个答案: