SVG中foreignObject的自适应高度

Question

在我的SVG中，有一个包含p元素的foreignObject。我希望这个结构的高度能够适应我的文本高度。

p元素已经适应了：我没有做任何事情。

但是，对于foreignObject，我遇到了一些问题。如果我删除height字段，它就不起作用。height:auto也不起作用。

- Arnaud

---

如果您能解释一下为什么需要使用foreignObject来适应，那可能会有所帮助。如果foreignObject比实际需要的要大，这会导致任何问题吗？ - Erik Dahlström

问题在于一些对象将被foreignObject覆盖，因此无法单击它们。例如，我可以将foreignObject放在其他对象之前，但我希望<p>在其他对象上方，因此我认为有必要将所有内容都放在其前面。（z-index在Firefox中似乎不起作用） - Arnaud

p元素必须在svg内吗？是否可以将其分成两个或更多部分？例如，背景svg、html元素、前景svg，所有这些都具有z-index层。如果您有一个简单的示例来展示您想要实现的内容，那将会更容易。 - Erik Dahlström

Answer 1

由于放大和缩小foreignObject本身没有实际用途，因此您可以将 foreignObject 的 height 和 width 都设置为1，并通过CSS设置 foreignObject { overflow: visible; } 使其内容可见且无论内容如何都可以进行处理。

- mahish

---

在Safari中无法正常工作。我不得不将高度设置为“100％”，这使得对象在所有其他浏览器中重叠。但这是相当hacky的，而且你不能将foreignObject包装在g中。 - moritz.vieli

Answer 2

您可以使用em单位设置foreignObject元素的高度，这可能有所帮助？

目前一个foreignObject元素的width和height属性是必需的，并且必须具有大于0的值，否则该元素将无法呈现。

更新：另一种替代方法是将foreignObject的尺寸设置为100％，并利用foreignObject默认具有透明背景的特性。由于SVG中的其他元素按绝对方式布局，因此它们不依赖于foreignObject的大小。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    p { position: absolute; top: 50%; left: 50%; width: 100px; }
  </style>

  <circle cx="50%" cy="50%" r="25%" fill="lightblue"/>

  <foreignObject width="100%" height="100%">
    <p xmlns="http://www.w3.org/1999/xhtml">
        some wrapped text...
        some wrapped text...
        some wrapped text...
        some wrapped text...
    </p>
  </foreignObject>
</svg>

- Erik Dahlström

---

我希望 foreignObject 的高度取决于文本的大小。这并不总是相同的：我无法预测并以 em 单位给出正确的高度。 - Arnaud

你也可以将foreignObject的高度指定为100％，这样行吗？我假设foreignObject本身使用透明背景。 - Erik Dahlström

不，它不起作用，因为在这种情况下，foreignObject占据了整个屏幕高度（从其起始点到屏幕底部）。我没有理解你消息的第二部分。 - Arnaud

回答您的编辑：是的，但问题在于一些对象会被foreignObject覆盖，因此将无法单击这些对象。我可以将foreignObject放在其他对象之前，但我希望<p>在其他对象之上，所以我认为这是必要的。（z-index在Firefox中似乎不起作用） - Arnaud

正如我在上面的答案中写到的（我不明白为什么要用-1，也许有人可以向我解释一下？:）。将高度和宽度设置为1，并将溢出设置为visible，然后你就完成了。 - mahish