SVG中foreignObject的自动高度

Question

在我的SVG中,我有一个包含ap元素的foreignObject.我希望这个结构的高度适应我文本的高度.

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

但我对foreignObject有麻烦.如果我删除字段高度,它不起作用.高度:auto也不起作用.

Answer 1

你可以foreignObject用em单位设置元素的高度,这可能有帮助吗？

眼下width和height的属性foreignObject是必需的,而且必须有值> 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>

Answer 2

由于没有实际使用foreignObject本身来进行放大和缩小，因此您可以将foreignObject height和都设置width为1，并通过CSS set foreignObject { overflow: visible; }使其内容可见，无论它是什么，并随其需要进行任何处理。