Как я могу использовать изображения SVG взаимозаменяемо с PNG в Firefox?

Question

Мой проект поддерживает загрузку пользователями своих собственных значков, которые будут использоваться для различных объектов в системе. Я бы хотел поддержать SVG, поскольку это означает, что одно и то же изображение можно масштабировать и использовать в нескольких местах.

Firefox имеет текущую ошибку , которая запрещает использование файлов SVG в тегах <img>. Из моей другой работы по xhtml я понял, что теги <object> были (xhtml) способом продвижения вперед для внешних носителей (и, по сути, эквивалентны - расширенная поддержка резервной функциональности в стороне), и, поскольку Firefox поддерживает SVG в тегах объектов, я переключился использовать их.

Однако, похоже, что «особенности» SVG не позволяют использовать их взаимозаменяемо в качестве масштабируемых изображений, так как события JavaScript, по-видимому, не всплывают из объекта, кроме нескольких других вещей.

Кто-нибудь знает, можно ли решить эти проблемы? То есть как я могу сказать Firefox, что я просто хочу изображение, используя тег объекта?

Answer 1

Элемент объекта «инкапсулирует» содержащий объект, то есть два DOM полностью разделены. Поэтому события не могут проходить из SVG DOM в содержащий HTML DOM.

Однако, используя JavaScript и AJAX, вы можете просто загрузить файл SVG (поскольку он является XML) и поместить его непосредственно в DOM (вам, возможно, придется установить некоторую ширину / высоту):

Используя jQuery, код выглядит примерно так:

$.get('icon.svg', function (svg) {
  $('#put_svg_here').append(svg.rootElement);
}, 'xml');

Answer 2

Я не уверен, что это квалифицируется как мошенничество, но я установил для тега объекта значение 'z-index: -1', а для содержащего div - значение 'position :lative' (чтобы создать новый контекст позиционирования без изменения макет страницы).

В этом я добавил еще один абсолютно позиционированный div с высотой и шириной, равными 100%; он фактически находится над тегом объекта (и не идет за контейнером из-за контекста позиционирования), в результате чего события мыши захватываются оверлеем div и всплывают до узла контейнера.

Бонусный div можно добавить с помощью jQuery, но для простоты я просто вставил его на стороне сервера при создании страницы.

Answer 3

Может быть, вы можете использовать DIV правильного размера и установить background-image на нем.

Редактировать : похоже, это не работает, хотя я не уверен, почему.