Неправильная ширина 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 );

0 ответов

Другие вопросы по тегам