Содержание внутри иностранного объема не выровнено в SVG. ⇐ Html

[Anonymous]

У меня есть компонент, который делает SVG. Я хочу, чтобы потребитель этого компонента имел возможность предоставить любой шаблон и (x, y) координаты, которые могут отображаться внутри моего компонента SVG. Это позволяет мне легко позиционировать содержание пользователя (элемент Root SVG может иметь некоторые свойства преобразования, применяемые к нему для перемещения начала начала) и дает пользователю возможность отображать контент, который не является SVG.
Я использую другой div внутри ForeignObject и применение преобразования к центру. />
div {
width: min-content;
height: min-content;
transform: translate(-50%, -50%);
}< /code>




















< /code>
< /div>
< /div>
< /p>
Проблема заключается в том, что содержание внутри иностранного объема не связано. И это выравнивание изменяется на основе позиции элемента иностранного объема. Здесь нужно отметить, что ограничивающая коробка, отображаемая инструментами Dev Browser, отображает правильную позицию/выравнивание BU, которое не видно, где содержится нарисовано. /> < /p>
Вот еще одно изображение, когда иностранный, расположенный в 6,6
< /p>
Я использую гораздо меньшую точку зрения, потому что проблема легко увидеть. И я могу воспроизвести эту проблему как в Chrome, так и в Firefox.


Подробнее здесь: https://stackoverflow.com/questions/796 ... ide-an-svg