Ниже приведено странное и явно ошибочное поведение Safari (протестировано в версиях 11 и 12). <foreignObject>, содержащий HTML, при масштабировании по-прежнему отображается в своем первоначальном размере, даже если его локальные пользовательские координаты пространства масштабируются относительно экрана. Содержимое HTML будет заметно переполнять родительский элемент <svg>, даже при явных правилах CSS.
Другие ответы здесь указывают на то, что ширина и высота должны быть заданы явно (я тестировал и в процентах, и в абсолютных единицах), а пространство имен должно быть установлено (I протестировано с установкой его на сам тег * <foreignObject> и на одного непосредственного ребенка), но пока ничего не помогло.
Странно то, что инструменты разработчика отображают прямоугольник маркировки (наложение в окне браузера) в своем предполагаемом масштабированном размере, в то время как сообщенные числа для размера являются немасштабированными.
Вот предполагаемая установка:
svg, foreignObject {
overflow: hidden;
}
rect {
fill:yellow;
}
#content {
position: relative;
width: 100%;
height: 100%;
background: red;
border-radius: 50%;
}
<svg width="200px" height="200px" viewBox="0 0 400 400">
<rect width="100%" height="100%" />
<foreignObject width="400" height="400">
<div id="content" xmlns="http://www.w3.org/1999/xhtml"></div>
</foreignObject>
</svg>
Скриншот Safari:
Использование атрибута преобразования (также для родительского элемента <g>) вместо неявного масштабирования через viewBox не имеет значения. Также я поиграл со всеми комбинациями абсолютных и относительных размеров
У кого-нибудь есть идеи, как обойти эту проблему?