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％，但它不起作用。

我已尝试将内部所有内容的高度设置为100％，但未成功。无论如何在外来对象svg中指定基于百分比的高度？

小提琴：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

Answer 2

代码的真实结构是：

<section> // this needed 100% height
    <section>
        <figure>
            <svg> // finally here

然而，在最高处，元素必须达到100％的高度。

将SVG foreignObject内div的高度设置为100％

2 个答案: