Intereting Posts
Прочитать видеоролик из сервлета на веб-странице? как запомнить положение прокрутки страницы Как центрировать выровненные по правому краю числа в столбце таблицы с помощью CSS? Контроль Javascript прокрутки SELECT Как я могу обернуть текстовые узлы, разделенные с помощью , своими тегами ? Обновить элемент , созданный шаблоном django Как переключить видимость элемента без jQuery? Значения CSS по умолчанию IE Проверка подлинности python html Как загрузить навигационное меню из внешнего файла? (Нет Wamp, весь код должен быть «браузером») Как сделать событие ng-click условным в AngularJS Хотя циклический ответ API в данных меню гармоник отсутствует в Angular4 Измените URL-адрес в адресной строке после нажатия на элемент DOM с помощью javascript / jquery Перемещение позиции при переключении нескольких элементов переполнения-y Как получить входы Unicode на html / javascript?

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

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

  • Chrome: версия 28. – отлично работает
  • Firefox: 22.0 – изображение не нарисовано
  • Opera: 12.16 – изображение отображается в 4 раза больше обычного

Код:

     
          
     

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

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

  viewBox="0 0 45 45" 

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

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

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

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

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

Элемент ‘image’ устанавливает новый видовой экран для файла с ссылками, как описано в разделе «Создание нового windows просмотра». Оценки для нового windows просмотра определяются атрибутами «x», «y», «width» и «height»