Textarea 不显示在嵌套的 svg 中答案

【问题标题】：Textarea do not show in nested svgTextarea 不显示在嵌套的 svg 中
【发布时间】：2017-12-21 22:09:30
【问题描述】：

我将 textarea 嵌入到嵌套 svg 中的 foreignObject 中，但 textarea 无法在我最新的 chrome 中显示。有人能帮我吗？提前致谢！

textarea {
  resize: none;
  width: 128px;
  height: 20px;
  font-size: 13px;
}

<svg width="1000" height="200">
  <foreignObject x="35" y="10" width="130" height="22">
    <input type="text" maxlength="20" style="width: 128px;">
  </foreignObject>
  <svg xmlns="http://www.w3.org/2000/svg" class="node" x="170" y="0">
    <foreignObject x="20" y="0" width="143" height="32">
      <p>text not show after input charactors below</p>
      <textarea contenteditable>112233112233112233112233112233112233</textarea>
      <div>123</div>
    </foreignObject>
  </svg>

【问题讨论】：

因为你是外来对象的宽度限制了它 width="143" 并且你必须增加文本区域的高度才能可见。

标签： javascript html css d3.js svg

【解决方案1】：

在以下代码行中，您将 foreignObject 容器大小限制为 143px vs 32px，因此您的 paragraph tag 以及 text area 被切断.

<foreignObject x="20" y="0" width="143" height="32">

如果您修改/增加尺寸，它们会显示出来：

<foreignObject x="20" y="0" width="100%" height="200">

textarea {
  resize: none;
  width: 128px !important;
  height: 20px !important;
  font-size: 13px;
}

<svg width="1000" height="200">
  <foreignObject x="35" y="10" width="132" height="22">
    <input type="text" maxlength="20" style="width: 128px;">
  </foreignObject>
  <svg xmlns="http://www.w3.org/2000/svg" class="node" x="170" y="0">
    <foreignObject x="20" y="0" width="100%" height="200">
      <p>text not show after input charactors below</p>
      <textarea contenteditable>1111111111111111111111111111114322432</textarea>
      <div>123</div>
    </foreignObject>
  </svg>
  </svg>

【讨论】：

@somethin 检查我发布的代码 sn-p 并将其与您的代码进行比较，检查您的 textarea 的高度、foreignObject 的宽度和高度。
谢谢，但我希望将 textarea 的高度固定为 20px，并让其中的文本像普通 html 一样流动
然后在 CSS 中保持 textarea 的高度为 20px。 :)
@somethin 用 textarea height 20px 更新了我的答案。
@somethin 刚刚注意到，这似乎是 chrome 中的一个错误。即使我从 textarea 中删除了那个长文本，它也会出现在 20px 的高度，但是如果我输入一些东西并且它溢出了 textarea，那么它就会消失。不过在 Firefox 中不会发生。