html - 将 SVG foreignObject 中的 div 的高度设置为 100%

Question

我有当前的 svg 结构:

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; top: -0.875px;" viewBox="0 0 191 220.54780283043706" preserveAspectRatio="xMinYMin">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
    <path fill="#000000" stroke="#585247" d="M95.5,2L189.26794919243113,56.13695070760927L189.26794919243113,164.4108521228278L95.5,218.54780283043706L1.7320508075688679,164.4108521228278L1.7320508075688679,56.13695070760927Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill-opacity="0" stroke-width="1%"></path>
    <foreignObject x="0" y="0" width="100%" height="100%">
        <div>
            <p>Hullo</p>
        </div>
    </foreignObject>
</svg>

我想把异物里面的div的高度设置成100%，但是不行。

我尝试将内部所有内容(包括 foreignObject 本身)的高度设置为 100%，但没有成功。无论如何在异物 svg 中指定基于百分比的高度？

fiddle :https://jsfiddle.net/zhh1nsxc/1/

Answer 1

改变这个:

div {
    height: 100%;
    display: table;
    margin: auto;

   p {
      display: table-cell;
      font-size: 1.2em;
      text-align: center;
      vertical-align: middle;
   }

}

为此:

div {
    height: 100%;
    display: table;
    margin: auto;
}
p {
    display: table-cell;
    font-size: 1.2em;
    text-align: center;
    vertical-align: middle;
}

Here is the JSFiddle demo