Неправильная ширина SVG Внутри другого SVG
В Firefox 53.0.3 я заметил странное поведение, когда один SVG с атрибутом "viewBox" помещается внутри другого.
Возьмите в качестве примера этот код или эту ручку.
<svg id="svgroot" height="812" width="1620">
<svg id="svgcontent" width="696" height="480" x="392" y="117" viewBox="0 0 580 400">
<g style="pointer-events:none">
<title style="pointer-events:inherit">background</title>
<rect width="100%" height="100%" id="canvas_background_fill" fill="red" style="pointer-events:inherit"></rect>
</g>
</svg>
</svg>
Как мы видим, у нас есть #svgcontent с with 696 и высотой 480, но если вы осмотрите элемент, ширина будет 835, а высота 576.
В chrome этот пример работает как положено.
Это ошибка Firefox или я делаю что-то не так?
Изменить: я заметил еще одну вещь. Ширина и высота содержимого дочернего SVG совпадают со значениями атрибутов.
Кажется, что неправильное значение измерения пришло из:
// 696 * ( 696 / 580 )
// 696 * 1.2
// 835
currentWidth = attributeWidth * ( attributeWidth / viewboxWidth );