Изображение Svg не отображается в Firefox

внутри простого элемента SVG у меня есть изображение.

  • Chrome: Версия 28. - отлично
  • Firefox: 22.0 - изображение не рисуется
  • Opera: 12.16-изображение показано в 4 раза больше, чем обычно

код:

    <svg width="500px" height="500px" viewBox="0 0 70 70">
         <image x="0" y="0" width="10" height="10" 
               id="knight" xlink:href="/images/knight.svg" />
    </svg>
10
firefox html image opera svg

2 ответов

ваш SVG не масштабируется, чтобы соответствовать прямоугольнику изображения 10x10, потому что у него нет окна просмотра. Визуализаторы SVG должны знать размеры содержимого SVG, чтобы знать, как его масштабировать. Для этого и предназначен атрибут viewBox.

попробуйте добавить следующее в корень <svg> элемент в knight.формат SVG.

  viewBox="0 0 45 45"

кроме того, вам нужно определить пространства имен для svg и xlink. Хотя, возможно, вы просто удалили их для ясности(?).

8

ваш рыцарь имеет размер 45 x 45 пикселей. Верхний левый угол (10 x 10) пикселей пуст.

вы просите, чтобы изображение отображалось для этого верхнего левого угла в <image> разметка, поэтому Firefox правильно ничего не показывает, потому что там ничего нет.

Если вы хотите увидеть рыцаря, сделать <image> ширина и высота 45, чтобы соответствовать базовому рыцарю.размеры СВГ.

ни Chrome, ни Opera не отображают изображение правильно

элемент "image" устанавливает новый видовой экран для ссылочного файла, как описано в разделе Создание нового видового экрана. Границы нового окна просмотра определяются атрибутами "x", "y", "width" и "height"

2