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

Question

Внутри простого элемента 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> 

Answer 1

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

Попробуйте добавить в корень <svg> элемент в knight.svg.

viewBox="0 0 45 45" 

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

Answer 2

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

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

Если вы хотите увидеть рыцаря, сделайте ширину и высоту <image> в соответствии с основными параметрами knight.svg.

Ни Chrome, ни Opera, кажется, чтобы отобразить изображение правильно

An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’