Блочная модель вложенного SVG неожиданно основана на размере дочернего контента

Question

Для SVG верхнего уровня ограничивающий прямоугольник определяется его атрибутами width/height или viewBox. Однако, к сожалению, я выяснил, что SVG, вложенные в другие SVG, неожиданно, похоже, основывают свою ограничивающую рамку на размере содержимого их детей.

Кто-нибудь знает, как заставить браузер вычислять ограничивающую рамку вложенных SVG на основе его собственных атрибутов width/height/viewBox или иным образом?

Ниже приведена демонстрация проблемы.

Спасибо.

https://jsfiddle.net/twhqbc87/1/

Answer 1

В случае, если неясно, что говорит Роберт, это то, что вы должны использовать атрибуты, чтобы установить размер SVG.Т.е.

<svg xmlns="http://www.w3.org/2000/svg" width="35px" height="35px">

Метод атрибута style работает только тогда, когда <svg> является элементом в HTML.То есть.это часть дерева HTML.Когда он является дочерним по отношению к SVG, он вместо этого становится частью документа SVG, обрабатывается и ведет себя в соответствии с правилами SVG.А по правилам SVG нельзя стилизовать свойства <svg> width и height с помощью CSS.