Как правильно установить высоту для HTML, встроенного во встроенный элемент SVG - PullRequest
0 голосов
/ 10 января 2019

Цель состоит в том, чтобы HTML-код, встроенный в элемент SVG, занимал всю ширину и высоту корневого элемента SVG, который сам встроен в документ HTML.

Однако, как вы можете видеть из Codepen, атрибут width, кажется, работает, но атрибут height не влияет на корневой элемент SVG. В результате встроенный div не имеет высоты 2688 пикселей.

В конечном итоге корневой элемент SVG и его содержимое должны иметь размер 1242x2688.

Что не так?

https://codepen.io/anon/pen/zyJZbr

<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
  <foreignObject width="100%" height="100%">
    <div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
      Why is this height wrong?
    </div>
  </foreignObject>
</svg>

1 Ответ

0 голосов
/ 10 января 2019

В Firefox ваш пример работает.
На sidenote, этот вопрос предлагает решение путем абсолютного позиционирования div внутри элемента svg:

#testBox {
  position:absolute;
}
<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
   <foreignObject width="100%" height="100%">
      <div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
        This is 100% height.
      </div>
   </foreignObject>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...